/* =========================================================================
   SENSORY STAR — Design System + Loja
   Paleta extraída da logo: azul-marinho, laranja, teal, âmbar, creme.
   ========================================================================= */

/* ---------- 1. TOKENS ---------------------------------------------------- */
:root {
  /* Marca */
  --navy-900:#081436; --navy-800:#0d1f4d; --navy:#10265c; --navy-600:#1e3a7b;
  --navy-300:#8f9dc4; --navy-100:#e4e8f4;

  --orange-700:#c33c0e; --orange-600:#e0450f; --orange:#f4501e;
  --orange-300:#ffa588; --orange-100:#ffe8e0;

  --teal-700:#0a5155; --teal-600:#0c6469; --teal:#107a80;
  --teal-300:#7cc3c6; --teal-100:#dcf0f0;

  --amber:#f5a623; --amber-300:#ffd28a; --amber-100:#fff2dc;

  --cream:#fdfbf6; --white:#ffffff;

  /* Semânticos — LIGHT */
  --bg:            var(--cream);
  --bg-elev:       var(--white);
  --bg-sunken:     #f4f1ea;
  --bg-brand:      var(--navy);
  --ink:           #16203d;
  --ink-soft:      #4c5573;
  --ink-muted:     #6f7896;
  --ink-invert:    #ffffff;
  --line:          #e6e2d8;
  --line-strong:   #d3cec1;
  --primary:       var(--orange);
  --primary-hover: var(--orange-600);
  --primary-soft:  var(--orange-100);
  --accent:        var(--teal);
  --accent-soft:   var(--teal-100);
  --focus:         var(--teal-600);
  --success:       #1a7f4b;
  --success-soft:  #dff5e8;
  --danger:        #c62828;
  --danger-soft:   #fde8e8;

  /* Blocos de destaque — neutros e claros; a cor entra só em ícone/texto/botão */
  --senses-bg: var(--bg-sunken);
  --senses-fg: var(--ink);
  --cta-bg:    linear-gradient(135deg, var(--bg-elev) 0%, var(--bg-sunken) 100%);
  --cta-fg:    var(--ink);
  --footer-bg:        var(--bg-elev);
  --footer-fg:        var(--ink-soft);
  --footer-fg-strong: var(--ink);
  --footer-fg-hover:  var(--orange-600);

  /* Tipografia */
  --font-display:'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:'Nunito Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fs-xs:.8125rem; --fs-sm:.9375rem; --fs-base:1rem; --fs-lg:1.125rem;
  --fs-xl:1.375rem; --fs-2xl:1.75rem; --fs-3xl:2.25rem; --fs-4xl:3rem;

  /* Espaçamento (escala 4pt) */
  --s-1:.25rem; --s-2:.5rem; --s-3:.75rem; --s-4:1rem; --s-5:1.25rem;
  --s-6:1.5rem; --s-8:2rem; --s-10:2.5rem; --s-12:3rem; --s-16:4rem; --s-20:5rem;

  /* Raios e sombras */
  --r-sm:10px; --r-md:16px; --r-lg:24px; --r-xl:32px; --r-full:999px;
  --sh-1:0 1px 2px rgba(8,20,54,.06), 0 1px 3px rgba(8,20,54,.05);
  --sh-2:0 4px 10px rgba(8,20,54,.07), 0 2px 4px rgba(8,20,54,.05);
  --sh-3:0 12px 28px rgba(8,20,54,.10), 0 4px 8px rgba(8,20,54,.06);
  --sh-4:0 24px 56px rgba(8,20,54,.16);

  /* Movimento */
  --dur-fast:150ms; --dur:220ms; --dur-slow:320ms;
  --ease-out:cubic-bezier(.16,.84,.44,1);
  --ease-in:cubic-bezier(.5,0,.9,.4);
  --ease-spring:cubic-bezier(.34,1.4,.64,1);

  --header-h:72px;
  --maxw:1240px;
}

/* Semânticos — DARK (tons dessaturados, não invertidos) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --bg:#0b1226; --bg-elev:#131c36; --bg-sunken:#080e1d; --bg-brand:#0d1730;
    --ink:#e9ecf6; --ink-soft:#b7bfd6; --ink-muted:#8d96b3; --ink-invert:#0b1226;
    --line:#243055; --line-strong:#33406b;
    --primary:#ff6b3d; --primary-hover:#ff835c; --primary-soft:#3a1c11;
    --accent:#4bb3b8; --accent-soft:#0f3336;
    --focus:#6fd3d8;
    --success:#4ecf8f; --success-soft:#0f2f21;
    --danger:#ff7b7b; --danger-soft:#3a1616;
    --sh-1:0 1px 2px rgba(0,0,0,.4); --sh-2:0 4px 10px rgba(0,0,0,.45);
    --sh-3:0 12px 28px rgba(0,0,0,.5); --sh-4:0 24px 56px rgba(0,0,0,.6);
    --senses-bg: linear-gradient(120deg, #0f3336 0%, #3a2a11 55%, #3a1c11 100%);
    --senses-fg: var(--ink);
    --cta-bg:    linear-gradient(135deg, var(--navy) 0%, var(--teal-700) 100%);
    --cta-fg:    #ffffff;
    --footer-bg:        var(--navy-900);
    --footer-fg:        rgba(255,255,255,.75);
    --footer-fg-strong: #ffffff;
    --footer-fg-hover:  var(--amber);
  }
}
:root[data-theme='dark'] {
  --bg:#0b1226; --bg-elev:#131c36; --bg-sunken:#080e1d; --bg-brand:#0d1730;
  --ink:#e9ecf6; --ink-soft:#b7bfd6; --ink-muted:#8d96b3; --ink-invert:#0b1226;
  --line:#243055; --line-strong:#33406b;
  --primary:#ff6b3d; --primary-hover:#ff835c; --primary-soft:#3a1c11;
  --accent:#4bb3b8; --accent-soft:#0f3336;
  --focus:#6fd3d8;
  --success:#4ecf8f; --success-soft:#0f2f21;
  --danger:#ff7b7b; --danger-soft:#3a1616;
  --sh-1:0 1px 2px rgba(0,0,0,.4); --sh-2:0 4px 10px rgba(0,0,0,.45);
  --sh-3:0 12px 28px rgba(0,0,0,.5); --sh-4:0 24px 56px rgba(0,0,0,.6);
  --senses-bg: linear-gradient(120deg, #0f3336 0%, #3a2a11 55%, #3a1c11 100%);
  --senses-fg: var(--ink);
  --cta-bg:    linear-gradient(135deg, var(--navy) 0%, var(--teal-700) 100%);
  --cta-fg:    #ffffff;
  --footer-bg:        var(--navy-900);
  --footer-fg:        rgba(255,255,255,.75);
  --footer-fg-strong: #ffffff;
  --footer-fg-hover:  var(--amber);
}

/* ---------- 2. RESET ----------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 16px)}
body{
  font-family:var(--font-body);
  font-size:var(--fs-base);
  line-height:1.65;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  min-height:100dvh;
  overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%}
img,video{height:auto}
/* Garante que [hidden] sempre esconda, mesmo em elementos com display:flex/grid próprio */
[hidden]{display:none !important}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:none}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:800;line-height:1.15;letter-spacing:-.015em}
ul{list-style:none;padding:0}

:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:3px solid var(--focus);
  outline-offset:2px;
  border-radius:6px;
}

.skip-link{
  position:absolute;left:var(--s-4);top:-100px;z-index:200;
  background:var(--navy);color:#fff;padding:var(--s-3) var(--s-5);
  border-radius:var(--r-sm);font-weight:700;transition:top var(--dur) var(--ease-out);
}
.skip-link:focus{top:var(--s-4)}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ---------- 3. UTILITÁRIOS ---------------------------------------------- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--s-5)}
.section{padding-block:var(--s-16)}
.section--tight{padding-block:var(--s-12)}
.stack>*+*{margin-top:var(--s-4)}
.eyebrow{
  font-family:var(--font-display);font-weight:800;font-size:var(--fs-sm);
  letter-spacing:.14em;text-transform:uppercase;color:var(--accent);
  display:flex;align-items:center;gap:var(--s-2);
}
.eyebrow::before{content:'';width:26px;height:3px;border-radius:2px;background:var(--primary)}
.section-title{font-size:clamp(1.75rem,4vw,var(--fs-3xl));margin-top:var(--s-3)}
.section-sub{color:var(--ink-soft);max-width:60ch;margin-top:var(--s-3);font-size:var(--fs-lg)}

/* ---------- 4. BOTÕES ---------------------------------------------------- */
.btn{
  --btn-bg:var(--primary); --btn-fg:#fff; --btn-bd:transparent;
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);
  min-height:48px;padding:var(--s-3) var(--s-6);
  background:var(--btn-bg);color:var(--btn-fg);
  border:2px solid var(--btn-bd);border-radius:var(--r-full);
  font-family:var(--font-display);font-weight:800;font-size:var(--fs-base);
  line-height:1;text-align:center;
  transition:background var(--dur-fast) var(--ease-out),
             transform var(--dur-fast) var(--ease-out),
             box-shadow var(--dur-fast) var(--ease-out),
             color var(--dur-fast) var(--ease-out);
  box-shadow:var(--sh-1);
}
.btn svg{flex-shrink:0}
.btn:hover:not(:disabled){background:var(--primary-hover);transform:translateY(-2px);box-shadow:var(--sh-2)}
.btn:active:not(:disabled){transform:translateY(0) scale(.98)}
.btn:disabled{opacity:.55;cursor:not-allowed;transform:none}
.btn--lg{min-height:56px;padding:var(--s-4) var(--s-8);font-size:var(--fs-lg)}
.btn--sm{min-height:40px;padding:var(--s-2) var(--s-4);font-size:var(--fs-sm)}
.btn--ghost{--btn-bg:transparent;--btn-fg:var(--ink);--btn-bd:var(--line-strong);box-shadow:none}
.btn--ghost:hover:not(:disabled){background:var(--bg-sunken);--btn-fg:var(--ink)}
.btn--teal{--btn-bg:var(--accent);--btn-fg:#fff}
.btn--teal:hover:not(:disabled){background:var(--teal-600)}
:root[data-theme='dark'] .btn--teal:hover:not(:disabled){background:var(--teal-300);color:var(--navy-900)}
.btn--navy{--btn-bg:var(--navy);--btn-fg:#fff}
.btn--navy:hover:not(:disabled){background:var(--navy-600)}
.btn--wide{width:100%}
.btn--wa{--btn-bg:#25d366;--btn-fg:#06301a}
.btn--wa:hover:not(:disabled){background:#1fbb59}

.icon-btn{
  display:inline-grid;place-items:center;flex-shrink:0;
  width:48px;height:48px;border-radius:var(--r-full);
  color:var(--ink);background:transparent;
  transition:background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.icon-btn:hover{background:var(--bg-sunken)}
.icon-btn:active{transform:scale(.92)}
.icon-btn svg{width:24px;height:24px}

/* ---------- 5. HEADER ---------------------------------------------------- */
.header{
  position:sticky;top:0;z-index:100;
  background:color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter:blur(14px) saturate(1.4);
  border-bottom:1px solid transparent;
  transition:border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.header.is-stuck{border-bottom-color:var(--line);box-shadow:var(--sh-1)}
.header__inner{
  display:flex;align-items:center;gap:var(--s-4);
  min-height:var(--header-h);
}
.brand{display:flex;align-items:center;gap:var(--s-3);flex-shrink:0;padding:var(--s-2);margin-left:calc(var(--s-2) * -1);border-radius:var(--r-md)}
.brand__mark{width:44px;height:44px;flex-shrink:0}
.brand__text{display:flex;flex-direction:column;line-height:1}
.brand__name{font-family:var(--font-display);font-weight:900;font-size:1.15rem;letter-spacing:-.02em;color:var(--navy)}
:root[data-theme='dark'] .brand__name{color:var(--ink)}
@media (prefers-color-scheme:dark){:root:not([data-theme='light']) .brand__name{color:var(--ink)}}
.brand__name em{font-style:normal;color:var(--primary)}
.brand__tag{font-size:.7rem;color:var(--ink-muted);letter-spacing:.02em;margin-top:3px}

.nav{display:flex;align-items:center;gap:var(--s-1);margin-left:auto}
.nav__link{
  position:relative;padding:var(--s-3) var(--s-4);border-radius:var(--r-full);
  font-weight:700;font-size:var(--fs-sm);color:var(--ink-soft);
  min-height:44px;display:inline-flex;align-items:center;
  transition:color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.nav__link:hover,.nav__link[aria-current='true']{color:var(--ink);background:var(--bg-sunken)}
.nav__link::after{
  content:'';position:absolute;left:50%;bottom:6px;translate:-50% 0;
  width:0;height:3px;border-radius:2px;background:var(--primary);
  transition:width var(--dur) var(--ease-out);
}
.nav__link:hover::after,.nav__link[aria-current='true']::after{width:22px}

.header__actions{display:flex;align-items:center;gap:var(--s-2);margin-left:var(--s-2)}

/* Botão de tema com texto ("Claro" / "Escuro") — visível no topo em telas largas */
.theme-toggle{
  display:inline-flex;align-items:center;gap:8px;
  min-height:44px;padding:0 var(--s-4) 0 var(--s-3);
  border:2px solid var(--line);border-radius:var(--r-full);
  background:var(--bg-elev);color:var(--ink-soft);
  font-family:var(--font-display);font-weight:800;font-size:var(--fs-sm);
  transition:border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.theme-toggle svg{width:20px;height:20px;color:var(--amber)}
.theme-toggle:hover{border-color:var(--accent);color:var(--ink)}
.theme-toggle:active{transform:scale(.96)}

/* No celular/tablet, tema e modo calmo saem do topo (evita amontoar ícones) e
   aparecem com texto dentro do menu — ver .nav-extra */
@media (max-width:1040px){
  .header__actions .only-desktop{display:none}
}
.header__actions .only-mobile{display:none}
@media (max-width:1040px){
  .header__actions .only-mobile{display:inline-grid}
}

.nav-extra{display:none}
.cart-btn{position:relative}
.cart-btn__count{
  position:absolute;top:2px;right:2px;min-width:22px;height:22px;padding:0 5px;
  display:grid;place-items:center;border-radius:var(--r-full);
  background:var(--primary);color:#fff;font-size:.7rem;font-weight:800;
  border:2px solid var(--bg);
  transform:scale(0);transition:transform var(--dur) var(--ease-spring);
}
.cart-btn__count.is-visible{transform:scale(1)}
.nav-toggle{display:none}

@media (max-width:1040px){
  .nav{
    position:fixed;inset:var(--header-h) 0 auto 0;
    flex-direction:column;align-items:stretch;gap:var(--s-1);
    background:var(--bg-elev);border-bottom:1px solid var(--line);
    padding:var(--s-4);box-shadow:var(--sh-3);
    transform:translateY(-12px);opacity:0;pointer-events:none;
    transition:opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
  }
  .nav.is-open{transform:translateY(0);opacity:1;pointer-events:auto}
  /* .nav vira position:fixed aqui e sai do fluxo — sem isso, .header__actions
     perde o empurrão pra direita que vinha do margin-left:auto do .nav */
  .header__actions{margin-left:auto}
  .nav__link{font-size:var(--fs-lg);min-height:52px}
  .nav__link::after{display:none}
  .nav-toggle{display:inline-grid}
  .brand__tag{display:none}

  .nav-extra{
    display:grid;gap:var(--s-2);
    margin-top:var(--s-3);padding-top:var(--s-4);
    border-top:1px solid var(--line);
  }
}
.nav-extra__btn{
  display:flex;align-items:center;gap:var(--s-3);width:100%;
  min-height:52px;padding:0 var(--s-4);
  border:2px solid var(--line);border-radius:var(--r-md);
  background:var(--bg-elev);font-weight:700;font-size:var(--fs-base);color:var(--ink);
  transition:border-color var(--dur-fast) var(--ease-out);
}
.nav-extra__btn:hover{border-color:var(--accent)}
.nav-extra__btn svg{width:22px;height:22px;color:var(--accent);flex-shrink:0}
.nav-extra__name{flex:1;text-align:left}
.nav-extra__state{
  font-size:var(--fs-xs);font-weight:800;text-transform:uppercase;letter-spacing:.04em;
  color:var(--ink-muted);padding:4px 10px;border-radius:var(--r-full);background:var(--bg-sunken);
}
.nav-extra__btn[aria-pressed='true'] .nav-extra__state{background:var(--primary-soft);color:var(--orange-700)}

/* ---------- 6. HERO ------------------------------------------------------ */
.hero{position:relative;overflow:hidden;padding-block:var(--s-16) var(--s-20)}
.hero__bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.hero__blob{
  position:absolute;border-radius:50%;filter:blur(95px);opacity:.28;
  animation:float 18s ease-in-out infinite;
}
.hero__blob--1{width:420px;height:420px;background:var(--orange-300);top:-140px;right:-80px}
.hero__blob--2{width:360px;height:360px;background:var(--teal-300);bottom:-160px;left:-100px;animation-delay:-6s}
.hero__blob--3{width:260px;height:260px;background:var(--amber-300);top:40%;left:45%;animation-delay:-11s;opacity:.2}
@keyframes float{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  33%{transform:translate3d(28px,-24px,0) scale(1.06)}
  66%{transform:translate3d(-22px,18px,0) scale(.96)}
}
.hero__grid{
  position:relative;z-index:1;
  display:grid;grid-template-columns:1.05fr .95fr;gap:var(--s-12);align-items:center;
}
.hero__title{font-size:clamp(2.25rem,5.5vw,var(--fs-4xl));letter-spacing:-.03em}
.hero__title span{color:var(--primary)}
.hero__lead{font-size:clamp(1.0625rem,2vw,var(--fs-xl));color:var(--ink-soft);max-width:52ch;margin-top:var(--s-5)}
.hero__cta{display:flex;flex-wrap:wrap;gap:var(--s-3);margin-top:var(--s-8)}
.hero__trust{display:flex;flex-wrap:wrap;gap:var(--s-5);margin-top:var(--s-8);padding-top:var(--s-6);border-top:1px solid var(--line)}
.trust{display:flex;align-items:center;gap:var(--s-3)}
.trust svg{width:28px;height:28px;color:var(--accent);flex-shrink:0}
.trust b{display:block;font-family:var(--font-display);font-size:var(--fs-sm)}
.trust span{font-size:var(--fs-xs);color:var(--ink-muted)}

.hero__art{position:relative;aspect-ratio:1;max-width:480px;margin-inline:auto;width:100%}
.hero__ring{
  position:absolute;inset:0;border-radius:50%;
  border:3px dashed var(--orange-300);
  animation:spin 60s linear infinite;
}
.hero__disc{
  position:absolute;inset:8%;border-radius:50%;overflow:hidden;
  background:linear-gradient(150deg,var(--teal-100),var(--amber-100) 55%,var(--orange-100));
  display:grid;place-items:center;box-shadow:var(--sh-3);
}
:root[data-theme='dark'] .hero__disc{background:linear-gradient(150deg,#0f3336,#3a2a11 55%,#3a1c11)}
.hero__disc svg{width:62%;height:62%;animation:bob 6s ease-in-out infinite}
.hero__disc img{
  width:122%;height:122%;max-width:none;max-height:none;object-fit:contain;
  animation:bob 6s ease-in-out infinite;
  filter:drop-shadow(0 6px 14px rgba(8,20,54,.18));
}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}

.hero__chip{
  position:absolute;display:flex;align-items:center;gap:var(--s-2);
  background:var(--bg-elev);border:1px solid var(--line);border-radius:var(--r-full);
  padding:var(--s-2) var(--s-4);box-shadow:var(--sh-2);
  font-family:var(--font-display);font-weight:800;font-size:var(--fs-xs);white-space:nowrap;
  animation:bob 5s ease-in-out infinite;
}
.hero__chip svg{width:18px;height:18px}
.hero__chip--1{top:6%;left:-4%;color:var(--orange-600);animation-delay:-1s}
.hero__chip--2{bottom:14%;right:-6%;color:var(--teal-600);animation-delay:-3s}
.hero__chip--3{bottom:-2%;left:12%;color:var(--navy-600);animation-delay:-2s}
:root[data-theme='dark'] .hero__chip--3{color:var(--navy-300)}

@media (max-width:900px){
  .hero{padding-block:var(--s-10) var(--s-12)}
  .hero__grid{grid-template-columns:1fr;gap:var(--s-10);text-align:center}
  .hero__art{max-width:320px;order:-1}
  .hero__grid .eyebrow{flex-direction:column;align-items:center;gap:6px}
  .hero__cta{justify-content:center}
  .hero__trust{justify-content:center}
}
@media (max-width:480px){
  .hero{padding-block:var(--s-8) var(--s-10)}
  .hero__grid{gap:var(--s-6)}
  .hero__art{max-width:190px}
}

/* ---------- 8. FILTROS --------------------------------------------------- */
.search{position:relative;flex:1 1 260px;min-width:0}
.search svg{position:absolute;left:16px;top:50%;translate:0 -50%;width:20px;height:20px;color:var(--ink-muted);pointer-events:none}
.search input{
  width:100%;min-height:48px;padding:var(--s-3) var(--s-4) var(--s-3) 46px;
  background:var(--bg-elev);border:2px solid var(--line);border-radius:var(--r-full);
  transition:border-color var(--dur-fast) var(--ease-out);
}
.search input:hover{border-color:var(--line-strong)}
.search input:focus{border-color:var(--accent);outline-offset:1px}
.select{
  min-height:48px;padding:var(--s-3) var(--s-10) var(--s-3) var(--s-4);
  background:var(--bg-elev);border:2px solid var(--line);border-radius:var(--r-full);
  font-weight:600;cursor:pointer;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236f7896' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;background-size:18px;
}
.chips{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-top:var(--s-3)}
.chip{
  display:inline-flex;align-items:center;gap:var(--s-2);
  min-height:44px;padding:var(--s-2) var(--s-4);
  border:2px solid var(--line);border-radius:var(--r-full);
  background:var(--bg-elev);font-weight:700;font-size:var(--fs-sm);color:var(--ink-soft);
  transition:all var(--dur-fast) var(--ease-out);
}
.chip:hover{border-color:var(--accent);color:var(--ink);transform:translateY(-1px)}
.chip[aria-pressed='true']{
  background:var(--primary-soft);border-color:var(--primary);color:var(--orange-700);
}
:root[data-theme='dark'] .chip[aria-pressed='true']{background:var(--accent);border-color:var(--accent);color:var(--navy-900)}
.chip[aria-pressed='true']::before{content:'✓';font-weight:900}

@media (max-width:680px){
  .chips{
    flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x proximity;scroll-padding-inline:var(--s-5);-webkit-overflow-scrolling:touch;
    margin-inline:calc(var(--s-5) * -1);padding-inline:var(--s-5);padding-bottom:var(--s-1);
    scrollbar-width:none;
  }
  .chips::-webkit-scrollbar{display:none}
  .chip{flex-shrink:0;scroll-snap-align:start}
}

.results-info{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);flex-wrap:wrap;margin-bottom:var(--s-5)}
.results-info p{color:var(--ink-muted);font-size:var(--fs-sm)}
.results-info strong{color:var(--ink)}

/* ---------- 9. GRID DE PRODUTOS ----------------------------------------- */
.products{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(268px,1fr));
  gap:var(--s-6);
}
.card{
  position:relative;display:flex;flex-direction:column;
  background:var(--bg-elev);border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;box-shadow:var(--sh-1);
  transition:transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out),
             border-color var(--dur) var(--ease-out);
  animation:cardIn var(--dur-slow) var(--ease-out) both;
}
@keyframes cardIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.card:hover,.card:focus-within{transform:translateY(-6px);box-shadow:var(--sh-3);border-color:var(--orange-300)}
.card__media{
  position:relative;aspect-ratio:4/3;background:var(--bg-sunken);overflow:hidden;
}
.card__media img,.card__media video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform var(--dur-slow) var(--ease-out), opacity var(--dur) var(--ease-out);
}
.card__media video{opacity:0}
.card:hover .card__media img{transform:scale(1.06)}
@media (hover:hover) and (pointer:fine){
  .card.has-video:hover .card__media video,
  .card.has-video:focus-within .card__media video{opacity:1}
}
.card__badges{position:absolute;top:var(--s-3);left:var(--s-3);z-index:2;display:flex;flex-wrap:wrap;gap:var(--s-2);max-width:calc(100% - 24px)}
.badge{
  display:inline-flex;align-items:center;gap:4px;
  padding:5px var(--s-3);border-radius:var(--r-full);
  font-family:var(--font-display);font-size:.7rem;font-weight:900;
  letter-spacing:.04em;text-transform:uppercase;
  background:var(--navy);color:#fff;box-shadow:var(--sh-1);
}
.badge--promo{background:var(--primary)}
.badge--novo{background:var(--teal)}
.badge--destaque{background:var(--amber);color:var(--navy-900)}
.badge--esgotado{background:var(--ink-muted)}
.card__video-flag{
  position:absolute;top:var(--s-3);right:var(--s-3);z-index:2;
  width:34px;height:34px;display:grid;place-items:center;border-radius:var(--r-full);
  background:rgba(8,20,54,.68);color:#fff;backdrop-filter:blur(4px);
}
.card__video-flag svg{width:18px;height:18px}
.card__slide{opacity:0;pointer-events:none}
.card__slide.is-active{opacity:1;pointer-events:auto}
.card__nav{
  position:absolute;top:50%;translate:0 -50%;z-index:3;
  width:30px;height:30px;display:grid;place-items:center;border-radius:var(--r-full);
  background:rgba(8,20,54,.5);color:#fff;backdrop-filter:blur(2px);
  transition:background var(--dur-fast) var(--ease-out);
}
.card__nav svg{width:16px;height:16px}
.card__nav--prev{left:var(--s-3)}
.card__nav--next{right:var(--s-3)}
.card__nav:hover{background:rgba(8,20,54,.75)}
.card__media:has(.card__dots)::after{
  content:'';position:absolute;inset:auto 0 0 0;height:44%;z-index:2;
  background:linear-gradient(to top, rgba(8,20,54,.38), transparent);
  pointer-events:none;
}
.card__dots{
  position:absolute;bottom:var(--s-3);left:50%;translate:-50% 0;z-index:3;
  display:flex;align-items:center;gap:5px;
}
.dot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.6);transition:all var(--dur-fast) var(--ease-out)}
.dot.is-active{width:16px;border-radius:3px;background:#fff}
.card__body{display:flex;flex-direction:column;flex:1;padding:var(--s-5);gap:var(--s-2)}
.card__cat{font-size:var(--fs-xs);font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.card__title{font-size:var(--fs-lg);line-height:1.25}
.card__desc{font-size:var(--fs-sm);color:var(--ink-soft);display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s-3);padding:var(--s-4) var(--s-5);border-top:1px solid var(--line);background:var(--bg-elev)}
.price{display:flex;flex-direction:column;line-height:1.1;min-width:0}
.price__old{font-size:var(--fs-xs);color:var(--ink-muted);text-decoration:line-through}
.price__from{font-size:var(--fs-xs);color:var(--ink-muted);font-weight:700}
.price__now{font-family:var(--font-display);font-size:var(--fs-xl);font-weight:900;color:var(--navy);font-variant-numeric:tabular-nums;white-space:nowrap}
:root[data-theme='dark'] .price__now{color:var(--ink)}
.card__actions{display:flex;align-items:center;gap:var(--s-2);margin-left:auto}
.card__add{
  display:inline-grid;place-items:center;flex-shrink:0;
  width:44px;height:44px;
  background:var(--primary);color:#fff;border-radius:var(--r-full);
  box-shadow:var(--sh-1);
  transition:background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.card__add:hover{background:var(--primary-hover);transform:translateY(-2px) scale(1.05);box-shadow:var(--sh-2)}
.card__add:active{transform:scale(.92)}

@media (max-width:680px){
  .products{grid-template-columns:repeat(2,1fr);gap:var(--s-3)}
  .card__media{aspect-ratio:4/5}
  .card__nav{width:26px;height:26px}
  .card__nav svg{width:14px;height:14px}
  .card__body{padding:var(--s-3);gap:3px}
  .card__cat{font-size:.68rem}
  .card__title{font-size:var(--fs-sm);line-height:1.3}
  .card__desc{display:none}
  .card__foot{flex-direction:column;align-items:stretch;gap:var(--s-2);padding:var(--s-3)}
  .card__actions{width:100%}
  .card__actions .btn{
    flex:1;--btn-bg:var(--primary);--btn-fg:#fff;--btn-bd:transparent;
    padding:var(--s-2) var(--s-3);font-size:var(--fs-xs);min-height:40px;
  }
  .card__add{width:40px;height:40px}
  .card__add svg{width:18px;height:18px}
}

.empty{
  grid-column:1/-1;text-align:center;padding:var(--s-16) var(--s-4);
  border:2px dashed var(--line-strong);border-radius:var(--r-lg);
}
.empty svg{width:64px;height:64px;color:var(--line-strong);margin-inline:auto}
.empty h3{margin-top:var(--s-4);font-size:var(--fs-xl)}
.empty p{color:var(--ink-muted);margin-top:var(--s-2)}

/* Skeleton */
.skeleton{border-radius:var(--r-lg);overflow:hidden;background:var(--bg-elev);border:1px solid var(--line)}
.skeleton__box{background:var(--bg-sunken);position:relative;overflow:hidden}
.skeleton__box::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--bg-elev) 70%,transparent),transparent);
  animation:shimmer 1.4s infinite;
}
@keyframes shimmer{to{transform:translateX(100%)}}
.skeleton__media{aspect-ratio:4/3}
.skeleton__lines{padding:var(--s-5);display:grid;gap:var(--s-3)}
.skeleton__line{height:14px;border-radius:7px}
.skeleton__line--sm{width:40%;height:10px}
.skeleton__line--lg{width:75%;height:20px}

/* ---------- 10. MODAL / DRAWER ------------------------------------------ */
.scrim{
  position:fixed;inset:0;z-index:150;
  background:rgba(8,20,54,.55);backdrop-filter:blur(3px);
  opacity:0;pointer-events:none;transition:opacity var(--dur) var(--ease-out);
}
.scrim.is-open{opacity:1;pointer-events:auto}

.modal{
  position:fixed;z-index:160;inset:0;
  display:grid;place-items:center;padding:var(--s-4);
  pointer-events:none;
}
.modal__panel{
  width:min(980px,100%);max-height:min(90dvh,860px);
  background:var(--bg-elev);border-radius:var(--r-xl);box-shadow:var(--sh-4);
  overflow:auto;pointer-events:auto;
  opacity:0;transform:translateY(24px) scale(.97);
  transition:opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-spring);
}
.modal.is-open .modal__panel{opacity:1;transform:none}
.modal__close{position:absolute;top:var(--s-4);right:var(--s-4);z-index:3;background:var(--bg-elev);box-shadow:var(--sh-2)}
.pd{display:grid;grid-template-columns:1.05fr 1fr}
.pd__media{background:var(--bg-sunken);padding:var(--s-5);display:flex;flex-direction:column;gap:var(--s-3)}
.pd__stage{
  position:relative;aspect-ratio:1;border-radius:var(--r-lg);overflow:hidden;background:var(--bg-elev);
}
.pd__stage img,.pd__stage video{width:100%;height:100%;object-fit:cover}
.pd__thumbs{display:flex;gap:var(--s-2);flex-wrap:wrap}
.pd__thumb{
  width:66px;height:66px;border-radius:var(--r-sm);overflow:hidden;
  border:3px solid transparent;background:var(--bg-elev);flex-shrink:0;position:relative;
  transition:border-color var(--dur-fast) var(--ease-out)
}
.pd__thumb img{width:100%;height:100%;object-fit:cover}
.pd__thumb[aria-current='true']{border-color:var(--primary)}
.pd__thumb--video::after{
  content:'';position:absolute;inset:0;background:rgba(8,20,54,.45)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E") center/26px no-repeat;
}
.pd__info{padding:var(--s-8) var(--s-6);display:flex;flex-direction:column;gap:var(--s-4)}
.pd__title{font-size:var(--fs-2xl)}
.pd__price{display:flex;align-items:baseline;gap:var(--s-3);flex-wrap:wrap}
.pd__price .price__now{font-size:var(--fs-3xl)}
.pd__desc{color:var(--ink-soft);white-space:pre-line}
.specs{display:grid;gap:var(--s-2);background:var(--bg-sunken);border-radius:var(--r-md);padding:var(--s-4)}
.specs div{display:flex;justify-content:space-between;gap:var(--s-4);font-size:var(--fs-sm)}
.specs dt{color:var(--ink-muted)}
.specs dd{font-weight:700;text-align:right}
.qty{display:inline-flex;align-items:center;border:2px solid var(--line);border-radius:var(--r-full);overflow:hidden}
.qty button{width:44px;height:44px;display:grid;place-items:center;font-size:1.25rem;font-weight:800;color:var(--ink-soft)}
.qty button:hover{background:var(--bg-sunken);color:var(--ink)}
.qty output{min-width:44px;text-align:center;font-weight:800;font-variant-numeric:tabular-nums}
.pd__buy{display:flex;gap:var(--s-3);flex-wrap:wrap;align-items:center}
.pd__buy .btn{flex:1 1 180px}

@media (max-width:820px){
  .pd{grid-template-columns:1fr}
  .modal{align-items:flex-end;padding:0}
  .modal__panel{max-height:92dvh;border-radius:var(--r-xl) var(--r-xl) 0 0}
  .pd__info{padding:var(--s-6) var(--s-5) var(--s-8)}
}

/* Drawer do carrinho */
.drawer{
  position:fixed;top:0;right:0;bottom:0;z-index:160;
  width:min(440px,100%);display:flex;flex-direction:column;
  background:var(--bg-elev);box-shadow:var(--sh-4);
  transform:translateX(100%);transition:transform var(--dur-slow) var(--ease-out);
}
.drawer.is-open{transform:none}
.drawer__head{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-4) var(--s-5);border-bottom:1px solid var(--line)}
.drawer__head h2{font-size:var(--fs-xl);flex:1}
.drawer__body{flex:1;overflow-y:auto;padding:var(--s-5);display:grid;gap:var(--s-6);align-content:start}
.drawer__foot{border-top:1px solid var(--line);padding:var(--s-4);display:grid;gap:var(--s-3);background:var(--bg-elev)}
#cartBody{display:grid;gap:var(--s-4)}
.line-item{display:grid;grid-template-columns:76px 1fr auto;gap:var(--s-3);align-items:center}
.line-item__img{width:76px;height:76px;border-radius:var(--r-md);object-fit:cover;background:var(--bg-sunken)}
.line-item__name{font-family:var(--font-display);font-weight:800;font-size:var(--fs-sm);line-height:1.3}
.line-item__meta{font-size:var(--fs-xs);color:var(--ink-muted);margin-top:2px}
.line-item__price{font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.line-item .qty{margin-top:var(--s-2);scale:.85;transform-origin:left}
.link-danger{color:var(--danger);font-size:var(--fs-xs);font-weight:700;text-decoration:underline;padding:var(--s-2) 0;min-height:32px}
.totals{display:grid;gap:6px;font-size:var(--fs-xs)}
.totals div{display:flex;justify-content:space-between}
.totals .grand{font-family:var(--font-display);font-size:var(--fs-lg);font-weight:900;padding-top:6px;border-top:1px dashed var(--line-strong)}
.note{font-size:.7rem;color:var(--ink-muted);text-align:center;line-height:1.4}

/* ---------- 10b. FORMULÁRIO DE PEDIDO (pagamento/entrega) --------------- */
.checkout-form{display:grid;gap:var(--s-6);padding-top:var(--s-5);border-top:1px solid var(--line)}
.cf-block{display:grid;gap:var(--s-3)}
.cf-label{font-family:var(--font-display);font-weight:800;font-size:var(--fs-sm)}
.cf-hint{font-size:var(--fs-xs);color:var(--ink-muted);min-height:1em}
.cf-hint--ok{color:var(--success);font-weight:700}
.cf-hint--warn{color:var(--primary);font-weight:700}

.seg{display:flex;gap:4px;background:var(--bg-sunken);padding:4px;border-radius:var(--r-full);border:1px solid var(--line)}
.seg--sub{margin-top:-4px}
.seg__btn{
  flex:1;min-height:44px;padding:0 var(--s-3);border-radius:var(--r-full);
  font-family:var(--font-display);font-weight:800;font-size:var(--fs-sm);color:var(--ink-soft);
  transition:background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.seg__btn:hover{color:var(--ink)}
.seg__btn[aria-checked='true']{background:var(--bg-elev);color:var(--ink);box-shadow:var(--sh-1)}
.seg.is-invalid{animation:shake .32s ease-in-out;box-shadow:0 0 0 3px var(--danger-soft)}
@keyframes shake{20%,60%{transform:translateX(-4px)}40%,80%{transform:translateX(4px)}}

.field-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-3)}
.field-cf{display:grid;gap:6px}
.field-cf--sm{grid-template-columns:none}
.field-cf label{font-size:var(--fs-xs);font-weight:800;color:var(--ink-soft)}
.field-cf .input.is-invalid,.field-row .input.is-invalid{border-color:var(--danger);background:var(--danger-soft)}
@media (max-width:420px){.field-row{grid-template-columns:1fr}}

.input,.textarea{
  width:100%;min-height:46px;padding:var(--s-3) var(--s-4);
  background:var(--bg-elev);color:var(--ink);
  border:2px solid var(--line);border-radius:var(--r-md);
  transition:border-color var(--dur-fast) var(--ease-out);
}
.input:hover,.textarea:hover{border-color:var(--line-strong)}
.input:focus,.textarea:focus{border-color:var(--accent);outline-offset:1px}
.textarea{min-height:88px;resize:vertical;line-height:1.5;font-family:inherit}

.alert{
  display:flex;gap:var(--s-3);align-items:flex-start;
  padding:var(--s-4);border-radius:var(--r-md);font-size:var(--fs-sm);line-height:1.55;
}
.alert svg{width:22px;height:22px;flex-shrink:0;margin-top:1px}
.alert--info{background:var(--accent-soft);color:var(--teal-700)}
:root[data-theme='dark'] .alert--info{color:var(--teal-300)}

/* ---------- 11. SEÇÕES INSTITUCIONAIS ----------------------------------- */
.about{background:var(--bg-sunken)}
.about__grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-12);align-items:center}
.steps{display:grid;gap:var(--s-4);counter-reset:step;padding:0}
.step{
  display:grid;grid-template-columns:52px 1fr;gap:var(--s-4);align-items:start;
  background:var(--bg-elev);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--s-4);
  transition:transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.step:hover{transform:translateX(6px);box-shadow:var(--sh-2)}
.step::before{
  counter-increment:step;content:counter(step);
  width:52px;height:52px;display:grid;place-items:center;border-radius:var(--r-md);
  background:var(--navy);color:#fff;font-family:var(--font-display);font-weight:900;font-size:var(--fs-xl);
}
.step:nth-child(2)::before{background:var(--teal)}
.step:nth-child(3)::before{background:var(--primary)}
.step:nth-child(4)::before{background:var(--amber);color:var(--navy-900)}
.step h3{font-size:var(--fs-lg)}
.step p{font-size:var(--fs-sm);color:var(--ink-soft);margin-top:4px}

.faq{display:grid;gap:var(--s-3);max-width:820px;margin-inline:auto}
.faq details{
  background:var(--bg-elev);border:1px solid var(--line);border-radius:var(--r-md);
  overflow:hidden;transition:border-color var(--dur) var(--ease-out)
}
.faq details[open]{border-color:var(--accent)}
.faq summary{
  padding:var(--s-4) var(--s-5);cursor:pointer;list-style:none;
  font-family:var(--font-display);font-weight:800;font-size:var(--fs-base);
  display:flex;justify-content:space-between;gap:var(--s-4);align-items:center;min-height:56px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';font-size:1.5rem;color:var(--primary);transition:transform var(--dur) var(--ease-out)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{padding:0 var(--s-5) var(--s-5);color:var(--ink-soft);font-size:var(--fs-sm)}

.cta-band{
  background:var(--cta-bg);
  color:var(--cta-fg);border-radius:var(--r-xl);padding:var(--s-12) var(--s-8);text-align:center;
  position:relative;overflow:hidden;border:1px solid var(--line);box-shadow:var(--sh-2);
}
.cta-band::before,.cta-band::after{
  content:'';position:absolute;border-radius:50%;
  background:color-mix(in srgb, var(--cta-fg) 8%, transparent);
}
.cta-band::before{width:300px;height:300px;top:-120px;left:-80px}
.cta-band::after{width:220px;height:220px;bottom:-110px;right:-60px}
.cta-band>*{position:relative}
.cta-band h2{font-size:clamp(1.5rem,4vw,var(--fs-3xl))}
.cta-band p{color:color-mix(in srgb, var(--cta-fg) 82%, transparent);max-width:56ch;margin:var(--s-4) auto 0}
.cta-band .btn{margin-top:var(--s-8)}

/* ---------- 12. FOOTER --------------------------------------------------- */
.footer{background:var(--footer-bg);color:var(--footer-fg);padding-block:var(--s-12) var(--s-6);margin-top:var(--s-16);border-top:1px solid var(--line)}
.footer__grid{display:grid;grid-template-columns:1.4fr 1fr 1.2fr;gap:var(--s-8)}
.footer h4{color:var(--footer-fg-strong);font-size:var(--fs-base);margin-bottom:var(--s-4)}
.footer a{display:inline-block;padding:6px 0;font-size:var(--fs-sm);min-height:34px;transition:color var(--dur-fast) var(--ease-out)}
.footer a:hover{color:var(--footer-fg-hover)}
.footer .brand__name{color:var(--footer-fg-strong)}
.footer .brand__tag{color:var(--footer-fg)}
.footer__note{font-size:var(--fs-sm);line-height:1.6;margin-top:var(--s-4);max-width:36ch}
.footer__bottom{
  display:flex;flex-wrap:wrap;gap:var(--s-4);justify-content:space-between;align-items:center;
  margin-top:var(--s-10);padding-top:var(--s-5);border-top:1px solid color-mix(in srgb, var(--footer-fg) 20%, transparent);
  font-size:var(--fs-xs);
}
/* Acesso admin discreto — vem primeiro no layout (order:-1) pra nunca
   ficar embaixo do botão flutuante do WhatsApp, que fica fixo no
   canto inferior direito bem onde esse link cairia por padrão. */
.admin-dot{
  order:-1;flex-shrink:0;
  width:34px;height:34px;display:grid;place-items:center;border-radius:var(--r-full);
  color:color-mix(in srgb, var(--footer-fg) 45%, transparent);
  transition:color var(--dur) var(--ease-out), background var(--dur) var(--ease-out);
}
.admin-dot:hover,.admin-dot:focus-visible{color:var(--footer-fg-hover);background:color-mix(in srgb, var(--footer-fg) 12%, transparent)}
.admin-dot svg{width:16px;height:16px}

@media (max-width:900px){
  .about__grid{grid-template-columns:1fr;gap:var(--s-8)}
  .about__grid>div{text-align:center}
  .about__grid>div .eyebrow{flex-direction:column;align-items:center;gap:6px}
  .step{grid-template-columns:44px 1fr;gap:var(--s-3);padding:var(--s-3)}
  .step::before{width:44px;height:44px;font-size:var(--fs-lg)}
  .footer__grid{grid-template-columns:1fr 1fr;gap:var(--s-6)}
}
@media (max-width:560px){
  .footer__grid{grid-template-columns:1fr;text-align:center}
  .footer .brand{justify-content:center}
  .footer__note{margin-inline:auto}
}

/* ---------- 13. TOAST + BOTÃO FLUTUANTE --------------------------------- */
.toasts{position:fixed;bottom:var(--s-5);left:50%;translate:-50% 0;z-index:200;display:grid;gap:var(--s-2);width:min(420px,calc(100% - 32px))}
.toast{
  display:flex;align-items:center;gap:var(--s-3);
  background:var(--bg-elev);color:var(--ink);border:1px solid var(--line);
  border-left:4px solid var(--accent);border-radius:var(--r-md);
  padding:var(--s-4);box-shadow:var(--sh-3);font-size:var(--fs-sm);font-weight:700;
  animation:toastIn var(--dur) var(--ease-spring) both;
}
.toast svg{width:22px;height:22px;flex-shrink:0;color:var(--accent)}
.toast--ok{border-left-color:var(--success)}
.toast--ok svg{color:var(--success)}
.toast--err{background:var(--danger-soft);border-left-color:var(--danger)}
.toast--err svg{color:var(--danger)}
@keyframes toastIn{from{opacity:0;transform:translateY(20px) scale(.95)}to{opacity:1;transform:none}}
.toast.is-out{animation:toastOut 160ms var(--ease-in) forwards}
@keyframes toastOut{to{opacity:0;transform:translateY(10px) scale(.97)}}

.fab{
  position:fixed;right:var(--s-5);bottom:var(--s-5);z-index:90;
  display:inline-flex;align-items:center;gap:var(--s-2);
  min-height:56px;padding:var(--s-4) var(--s-5);border-radius:var(--r-full);
  background:#25d366;color:#06301a;font-family:var(--font-display);font-weight:900;
  box-shadow:var(--sh-3);transition:transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.fab:hover{transform:translateY(-3px) scale(1.03);box-shadow:var(--sh-4)}
.fab svg{width:26px;height:26px}
.fab span{display:none}
@media (min-width:700px){.fab span{display:inline}}
@media (max-width:699px){.fab{bottom:var(--s-4);right:var(--s-4);padding:var(--s-4);width:56px;justify-content:center}}

/* ---------- 14. MODO CALMO + REDUCED MOTION ----------------------------- */
/* Público neurodivergente: reduz estímulos visuais sem perder função. */
:root[data-calm='on'] .hero__blob,
:root[data-calm='on'] .cta-band::before,
:root[data-calm='on'] .cta-band::after{display:none}
:root[data-calm='on'] *,
:root[data-calm='on'] *::before,
:root[data-calm='on'] *::after{
  animation-duration:.001ms !important;animation-iteration-count:1 !important;
  transition-duration:.001ms !important;
}
:root[data-calm='on'] .card.has-video:hover .card__media video{opacity:0}
:root[data-calm='on'] .hero__disc{background:var(--bg-sunken)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important;
  }
}

/* ---------- 15. IMPRESSÃO ------------------------------------------------ */
@media print{
  .header,.toolbar,.fab,.footer,.drawer,.scrim,.toasts{display:none !important}
  .card{break-inside:avoid;box-shadow:none}
}