/* ============================================================
   AvaliaUp — enhance.css
   Premium product showcase + advanced scroll/motion effects.
   Loaded LAST so it can layer on top of components/responsive.
   ============================================================ */

/* ===================== WhatsApp flutuante ===================== */
.wa-float {
  position: fixed; right: 24px; bottom: 28px; z-index: 90;
  width: 56px; height: 56px; border-radius: 50%; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  color: #042713;
  background: linear-gradient(145deg, var(--acc-bright), var(--acc));
  box-shadow:
    0 8px 24px -8px rgba(var(--acc-glow), 0.7),
    0 2px 0 rgba(255,255,255,0.18) inset,
    0 -2px 0 rgba(0,0,0,0.14) inset;
  opacity: 0; transform: translateY(20px) scale(0.85); pointer-events: none;
  transition: opacity .4s ease, transform .4s cubic-bezier(.2,.9,.3,1.2), box-shadow .2s;
  border: 1px solid rgba(255,255,255,0.14);
  white-space: nowrap; overflow: hidden;
}
.wa-float.in { opacity: 1; transform: none; pointer-events: auto; }
.wa-float:hover {
  box-shadow:
    0 14px 36px -10px rgba(var(--acc-glow), 0.85),
    0 2px 0 rgba(255,255,255,0.22) inset,
    0 -2px 0 rgba(0,0,0,0.14) inset;
  transform: translateY(-2px) scale(1.06);
}
.wa-float svg { flex: none; width: 26px; height: 26px; }
.wa-float .wa-label { display: none; }
.wa-ring {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 0 0 rgba(var(--acc-glow), 0.55);
}
.wa-float.in .wa-ring { animation: waPulse 2.2s ease-out infinite; }
.wa-float.bump { animation: waBump 0.9s ease; }
/* segundo anel de pulso para dar mais presença */
.wa-float.in::before {
  content: ""; position: absolute; inset: -6px; border-radius: 50%; pointer-events: none;
  box-shadow: 0 0 0 0 rgba(var(--acc-glow), 0.35);
  animation: waPulse2 2.2s ease-out 1.1s infinite;
}
@keyframes waPulse {
  0%   { box-shadow: 0 0 0 0   rgba(var(--acc-glow), 0.6); }
  70%  { box-shadow: 0 0 0 22px rgba(var(--acc-glow), 0); }
  100% { box-shadow: 0 0 0 0   rgba(var(--acc-glow), 0); }
}
@keyframes waPulse2 {
  0%   { box-shadow: 0 0 0 0   rgba(var(--acc-glow), 0.35); }
  70%  { box-shadow: 0 0 0 28px rgba(var(--acc-glow), 0); }
  100% { box-shadow: 0 0 0 0   rgba(var(--acc-glow), 0); }
}
@keyframes waBump {
  0%,100% { transform: none; }
  30%  { transform: translateY(-3px) scale(1.1) rotate(-4deg); }
  60%  { transform: translateY(-1px) scale(1.05) rotate(3deg); }
}
@media (prefers-reduced-motion: reduce){ .wa-float .wa-ring, .wa-float.bump { animation: none !important; } }
@media (max-width: 560px){
  .wa-float { right: 16px; bottom: 20px; width: 52px; height: 52px; }
}

/* ===================== Banner de cookies (LGPD) ===================== */
.cookie-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
  padding: 16px clamp(14px, 3vw, 26px) calc(16px + env(safe-area-inset-bottom, 0px));
  background: rgba(8,11,10,0.92); backdrop-filter: blur(16px);
  border-top: 1px solid rgba(var(--acc-glow), 0.22);
  box-shadow: 0 -18px 40px -22px rgba(0,0,0,0.9);
  animation: cookieUp .5s cubic-bezier(.2,.8,.2,1) both;
}
.cookie-bar.out { animation: cookieDown .36s ease forwards; }
@keyframes cookieUp { from { transform: translateY(110%); } to { transform: none; } }
@keyframes cookieDown { from { transform: none; opacity: 1; } to { transform: translateY(110%); opacity: 0; } }
.cookie-inner {
  max-width: var(--maxw, 1200px); margin: 0 auto;
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
}
.cookie-ic {
  flex: none; width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center;
  color: var(--acc); background: rgba(var(--acc-glow),0.1); border: 1px solid rgba(var(--acc-glow),0.2);
}
.cookie-tx { flex: 1 1 360px; min-width: 0; }
.cookie-tx b { display: block; font-family: var(--fh); font-weight: 800; font-size: 16px; letter-spacing: -0.01em; margin-bottom: 3px; }
.cookie-tx span { display: block; color: var(--tx-soft); font-size: 13.5px; line-height: 1.55; }
.cookie-tx a { color: var(--acc); text-decoration: underline; text-underline-offset: 2px; }
.cookie-actions { flex: none; display: flex; gap: 10px; align-items: center; }
.cookie-btn { padding: 12px 20px; font-size: 14px; }
@media (max-width: 620px){
  .cookie-ic { display: none; }
  .cookie-actions { width: 100%; }
  .cookie-actions .cookie-btn { flex: 1; }
}

/* hero notif swap — default (desktop) shows desktop variant; mobile swaps Júlia ↔ Rafael */
.notif-swap-mob { display: none; }
.notif-swap-desk { display: block; }
@media (max-width: 760px) {
  .notif-swap-desk { display: none; }
  .notif-swap-mob { display: block; }
}

/* ---------------- scroll progress bar ---------------- */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 2.5px; z-index: 100;
  width: 0%;
  background: linear-gradient(90deg, var(--acc-deep), var(--acc), var(--acc-bright));
  box-shadow: 0 0 12px 0 rgba(var(--acc-glow), 0.9);
  transition: width .08s linear;
}

/* ---------------- ambient cursor glow (desktop) ---------------- */
.cursor-glow {
  position: fixed; top: 0; left: 0; width: 520px; height: 520px; z-index: 0;
  margin: -260px 0 0 -260px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(var(--acc-glow), 0.07), transparent 62%);
  opacity: 0; transition: opacity .5s ease;
  mix-blend-mode: screen;
}
@media (hover: hover) and (min-width: 980px) { .cursor-glow { opacity: 1; } }

/* ---------------- reveal variants (richer than base) ---------------- */
.reveal-l { opacity: 0; transform: translateX(-34px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
.reveal-r { opacity: 0; transform: translateX(34px);  transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
.reveal-s { opacity: 0; transform: scale(.94);         transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
.reveal-l.in, .reveal-r.in, .reveal-s.in { opacity: 1; transform: none; }

/* parallax layer (driven by JS --py var) */
.parallax { will-change: transform; transform: translate3d(0, var(--py, 0px), 0); }

/* ===================== PRODUCT / UNBOXING ===================== */
.product { position: relative; overflow: hidden; }
.product .glow-pool { width: 600px; height: 480px; top: 10%; right: -160px; }

.product-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(34px, 6vw, 84px); align-items: center;
}
@media (max-width: 900px){ .product-grid { grid-template-columns: 1fr; gap: 40px; } }

/* --- 3D flip card --- */
.flip-stage { perspective: 1600px; display: flex; flex-direction: column; align-items: center; gap: 22px; }
.flip-card {
  position: relative; width: min(440px, 82vw); aspect-ratio: 1.586 / 1;
  transform-style: preserve-3d;
  transition: transform 1s cubic-bezier(.5,.05,.2,1);
}
.flip-card.flipped { transform: rotateY(180deg); }
.flip-face {
  position: absolute; inset: 0; border-radius: 18px; overflow: hidden;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 40px 90px -30px rgba(0,0,0,0.9), inset 0 1px 0 rgba(255,255,255,0.1);
  background: #000;
}
.flip-face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.flip-face--back { transform: rotateY(180deg); }
.flip-face .sheen {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 32%, rgba(255,255,255,0.12) 48%, transparent 62%);
  transform: translateX(-30%); transition: transform .9s ease;
}
.flip-card:hover .flip-face .sheen { transform: translateX(30%); }

.flip-underglow {
  position: absolute; left: 10%; right: 10%; bottom: -14%; height: 50%;
  background: radial-gradient(ellipse at center, rgba(var(--acc-glow),0.5), transparent 70%);
  filter: blur(40px); z-index: -1;
}

.flip-toggle { display: inline-flex; gap: 4px; padding: 5px; border-radius: 999px; background: rgba(255,255,255,0.04); border: 1px solid var(--line-2); }
.flip-toggle button {
  font-family: var(--fm); font-size: 12px; letter-spacing: 0.04em; cursor: pointer;
  padding: 8px 18px; border-radius: 999px; border: 0; background: transparent; color: var(--tx-soft);
  transition: background .2s, color .2s;
}
.flip-toggle button.on { background: linear-gradient(180deg, var(--acc-bright), var(--acc)); color: #042713; font-weight: 700; }

/* feature list with rule between */
.prod-feats { display: grid; gap: 2px; margin-top: 26px; }
.prod-feat { display: flex; gap: 16px; align-items: flex-start; padding: 18px 0; border-bottom: 1px solid var(--line); }
.prod-feat:last-child { border-bottom: 0; }
.prod-feat .pf-ic {
  width: 38px; height: 38px; flex: none; border-radius: 11px; display: grid; place-items: center;
  color: var(--acc); background: rgba(var(--acc-glow),0.1); border: 1px solid rgba(var(--acc-glow),0.18);
}
.prod-feat .pf-tx b { display: block; font-family: var(--fh); font-weight: 700; font-size: 16px; letter-spacing: -0.01em; color: var(--tx); margin-bottom: 3px; }
.prod-feat .pf-tx span { color: var(--tx-soft); font-size: 14.5px; line-height: 1.5; }

/* ===================== FOLDER / DELIVERY (premium) ===================== */
.folder-band { margin-top: clamp(54px, 8vw, 96px); }
.folder-head { max-width: 720px; margin-bottom: clamp(26px, 4vw, 40px); }
.folder-head h3 { font-family: var(--fh); font-weight: 800; font-size: clamp(26px, 3.6vw, 42px); letter-spacing: -0.025em; line-height: 1.04; }

.folder-feature {
  display: grid; grid-template-columns: 1.25fr 1fr; gap: 18px; align-items: stretch;
}
@media (max-width: 860px){ .folder-feature { grid-template-columns: 1fr; } }

/* main hero shot */
.ff-main {
  position: relative; border-radius: var(--r-xl); overflow: hidden;
  border: 1px solid var(--line-2); background: #08100c; min-height: 420px;
  box-shadow: 0 40px 90px -40px rgba(0,0,0,0.9);
}
.ff-main img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 32%; }
.ff-grad { position: absolute; inset: 0; background:
  radial-gradient(120% 90% at 80% 0%, rgba(var(--acc-glow),0.14), transparent 55%),
  linear-gradient(0deg, rgba(5,8,7,0.95) 6%, rgba(5,8,7,0.25) 42%, transparent 70%); }
.ff-chip {
  position: absolute; top: 18px; left: 18px; z-index: 3; display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--fm); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--acc-bright);
  padding: 7px 13px; border-radius: 999px; background: rgba(6,8,7,0.55); border: 1px solid rgba(var(--acc-glow),0.3); backdrop-filter: blur(8px);
}
.ff-chip .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--acc-bright); box-shadow: 0 0 8px var(--acc-bright); animation: pulse 1.8s ease infinite; }
.ff-caption { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: 30px 28px 26px; }
.ff-slogan { font-family: var(--fh); font-weight: 800; font-size: clamp(22px, 3vw, 32px); letter-spacing: -0.02em; }
.ff-slogan::after { content: ""; display: block; width: 46px; height: 3px; border-radius: 3px; margin-top: 10px; background: linear-gradient(90deg, var(--acc-bright), var(--acc-deep)); }
.ff-sub { color: var(--tx-soft); font-size: 14px; margin-top: 12px; max-width: 40ch; }

@media (max-width: 600px){ .ff-main { min-height: 360px; } }

/* side column — "what's inside" list, fills full height beside the photo */
.ff-side { display: flex; }
.ff-inside {
  flex: 1; border-radius: var(--r-xl); border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,0.03), transparent);
  padding: 22px 24px; display: flex; flex-direction: column; justify-content: center;
}
.ff-inside-head {
  font-family: var(--fm); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--acc); margin-bottom: 6px; padding-bottom: 16px; border-bottom: 1px solid var(--line);
}
.ff-row { display: flex; gap: 14px; align-items: flex-start; padding: 17px 0; border-bottom: 1px solid var(--line); }
.ff-row:last-child { border-bottom: 0; }
.ff-row .ff-ic { width: 36px; height: 36px; flex: none; border-radius: 10px; display: grid; place-items: center; color: var(--acc); background: rgba(var(--acc-glow),0.1); border: 1px solid rgba(var(--acc-glow),0.18); font-family: var(--fh); font-size: 15px; }
.ff-row b { display: block; font-family: var(--fh); font-weight: 700; font-size: 15px; color: var(--tx); }
.ff-row span { display: block; color: var(--tx-soft); font-size: 13.5px; margin-top: 2px; }

/* ===================== how-it-works marquee strip ===================== */
.tap-ribbon { position: relative; overflow: hidden; border-block: 1px solid var(--line); padding-block: 16px; margin-top: 4px; }
.tap-track { display: flex; gap: 48px; width: max-content; animation: ribbon 26s linear infinite; }
.tap-track span { font-family: var(--fh); font-weight: 800; font-size: clamp(20px,3vw,30px); letter-spacing: -0.02em; color: var(--tx-faint); display: inline-flex; align-items: center; gap: 48px; white-space: nowrap; }
.tap-track .dotmark { color: var(--acc); }
@keyframes ribbon { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .tap-track { animation: none; } }

/* ===================== mouse-tilt card (hero) ===================== */
.tilt3d { transform-style: preserve-3d; transition: transform .25s cubic-bezier(.2,.8,.2,1); will-change: transform; }

/* ===================== magnetic CTA glow ===================== */
.btn-primary { position: relative; overflow: hidden; }
.btn-primary::after {
  content: ""; position: absolute; top: 0; left: -120%; width: 60%; height: 100%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,0.45), transparent);
  transform: skewX(-18deg); transition: none;
}
.btn-primary:hover::after { animation: ctashine .9s ease; }
@keyframes ctashine { to { left: 140%; } }

/* CTA loading feedback — ao clicar, botão pulsa antes de navegar */
.btn-primary:active {
  transform: scale(0.97);
  transition: transform 0.1s ease;
}
.btn-primary.loading {
  pointer-events: none;
  opacity: 0.85;
}
.btn-primary.loading::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg,
    transparent 0%, rgba(255,255,255,0.18) 50%, transparent 100%);
  background-size: 200% 100%;
  animation: ctaLoading 0.9s linear infinite;
}
@keyframes ctaLoading {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* ===================== section number watermark ===================== */
.sec-head { position: relative; }

/* float-in for stat cards already handled; add subtle number pop */
.stat .num { display: inline-block; }

/* ===================== nicer focus-visible for a11y ===================== */
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--acc); outline-offset: 3px; border-radius: 4px;
}

/* footer slogan */
.foot-slogan { font-family: var(--fh); font-weight: 700; font-size: 15px; letter-spacing: 0.01em; color: var(--acc); margin: 14px 0 0; }

@media (prefers-reduced-motion: reduce){
  .reveal-l, .reveal-r, .reveal-s { transition: none !important; }
  .flip-card { transition: none !important; }
  .ff-spec--1, .ff-spec--2 { animation: none !important; }
}