/* ============ ÍCONES ============ */
.ico { width: 1.15em; height: 1.15em; flex: none; }

/* ============ BOTÕES ============ */
.btn {
  --h: 50px;
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: var(--h); padding: 0 22px;
  border-radius: var(--r-btn);
  font-weight: 700; font-size: 0.95rem; letter-spacing: 0.01em;
  font-variation-settings: 'wdth' 110;
  text-transform: uppercase;
  transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-med) var(--ease-out), background var(--t-med), color var(--t-med), border-color var(--t-med);
  white-space: nowrap;
}
.btn-sm { --h: 42px; padding: 0 16px; font-size: 0.8rem; border-radius: 12px; }
.btn-lg { --h: 58px; padding: 0 28px; font-size: 1rem; }
.btn:active { transform: scale(0.97); }

/* brilho que atravessa como luz em metal */
.btn::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.55) 48%, transparent 64%);
  transform: translateX(-120%);
  transition: transform 800ms var(--ease-out);
}
.btn:hover::after { transform: translateX(120%); }

.btn-green {
  background: linear-gradient(180deg, #4cf092 0%, var(--green) 55%, #23c167 100%);
  color: var(--green-ink);
  box-shadow: 0 0 0 1px rgba(138,245,185,.5) inset, 0 10px 30px -10px var(--green-glow), 0 0 0 0 var(--green-glow);
}
.btn-green:hover { box-shadow: 0 0 0 1px rgba(200,255,225,.7) inset, 0 16px 40px -10px rgba(53,224,127,.65), 0 0 0 6px rgba(53,224,127,.12); }
.btn-ghost {
  background: rgba(255,255,255,0.04);
  color: var(--ink);
  border: 1px solid var(--line-strong);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.btn-ghost:hover { border-color: var(--green-line); background: rgba(53,224,127,0.08); }
.btn-light {
  background: linear-gradient(180deg, #ffffff, #d7dde0);
  color: #0b0e10;
  box-shadow: 0 1px 0 #fff inset, 0 14px 30px -14px rgba(0,0,0,.8);
}

/* ============ MARCA ============ */
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--green); }
.brand-logo { height: 46px; width: auto; display: none; }
.brand.has-logo .brand-logo { display: block; }
.brand.has-logo .brand-word { display: none; }
.brand-word { display: inline-flex; align-items: center; gap: 10px; }
.brand-mark { color: var(--green); filter: drop-shadow(0 0 8px rgba(53,224,127,.55)); display: grid; }
.brand-text { display: grid; line-height: 1; }
.brand-text small {
  font-family: var(--font-tech); font-size: 0.5rem; letter-spacing: 0.32em; color: var(--steel-200); text-transform: uppercase; margin-bottom: 4px;
}
.brand-text strong {
  font-family: var(--font-tech); font-weight: 400; font-size: 1.02rem; letter-spacing: 0.08em;
  background: linear-gradient(180deg, var(--green-hi), var(--green) 60%, #1fae5c);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.brand-lg .brand-text strong { font-size: 1.45rem; }
.brand-lg .brand-text small { font-size: 0.62rem; }
.brand-lg .brand-logo { height: 64px; }

/* ============ ESTRELAS / CHIPS / PÍLULAS ============ */
.stars { color: #ffc93c; letter-spacing: 0.12em; text-shadow: 0 0 14px rgba(255,201,60,.35); }
.stars-lg { font-size: 1.5rem; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips li {
  font-family: var(--font-tech); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 7px 12px; border-radius: var(--r-chip);
  border: 1px solid var(--line-strong); color: var(--steel-200);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.01));
}

.rating-pill {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 9px 16px 9px 12px; border-radius: var(--r-chip);
  background: var(--glass); border: 1px solid var(--line-strong);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  font-size: 0.85rem; color: var(--ink-soft);
  transition: border-color var(--t-med);
}
.rating-pill strong { color: var(--ink); }
.rating-pill:hover { border-color: var(--green-line); }

/* ============ CARDS (grafite com luz que segue o mouse) ============ */
.card-light {
  --mx: 50%; --my: 0%;
  position: relative; isolation: isolate;
  background:
    radial-gradient(420px circle at var(--mx) var(--my), rgba(53,224,127,.10), transparent 45%),
    linear-gradient(180deg, var(--graphite-800), var(--graphite-900));
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, var(--shadow-deep);
  transition: border-color var(--t-med), transform var(--t-med) var(--ease-out);
}
.card-light::before {
  content: ''; position: absolute; inset: -1px; border-radius: inherit; z-index: -1; pointer-events: none;
  background: radial-gradient(260px circle at var(--mx) var(--my), rgba(53,224,127,.55), transparent 60%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; padding: 1px;
  opacity: 0; transition: opacity var(--t-med);
}
.card-light:hover::before { opacity: 1; }

/* ============ WHATSAPP FLUTUANTE ============ */
.wa-float {
  position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 40;
  width: 58px; height: 58px; border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(180deg, #4cf092, var(--green));
  color: var(--green-ink);
  box-shadow: 0 12px 30px -8px rgba(53,224,127,.6), 0 0 0 1px rgba(200,255,225,.5) inset;
  transform: scale(0); transition: transform 500ms var(--ease-out);
}
.wa-float.is-on { transform: scale(1); }
.wa-float svg { width: 28px; height: 28px; }
.wa-float::before {
  content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--green);
  animation: ping 2.4s var(--ease-out) infinite;
}
@keyframes ping { from { transform: scale(1); opacity: .7; } to { transform: scale(1.7); opacity: 0; } }