/* ═══════════════════════════════════════════════════════════
   LUAL VARIEDADES — style.css  v3.0
   Design system único · Dark Luxury · Preto + Dourado
   Cascade layers · mobile-first · conversão
   ═══════════════════════════════════════════════════════════ */

@layer reset, tokens, base, animations, layout, components, responsive;

/* ══════════════ RESET ══════════════ */
@layer reset {
  *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
  img, video, svg { max-width: 100%; display: block; }
  button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
  a { text-decoration: none; color: inherit; }
  ul { list-style: none; }
  :focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
}

/* ══════════════ TOKENS ══════════════ */
@layer tokens {
  :root {
    --gold:        #c9a84c;
    --gold-light:  #e8c97a;
    --gold-dark:   #8b6914;
    --gold-grad:   linear-gradient(135deg, #c9a84c 0%, #f0d678 50%, #c9a84c 100%);
    --gold-glow:   rgba(201, 168, 76, .28);
    --wpp:         #25d366;
    --wpp-glow:    rgba(37, 211, 102, .3);

    --black:   #000;
    --black-2: #0a0a0a;
    --black-3: #111;
    --black-4: #181818;
    --black-5: #222;
    --gray-1:  #e8e8e8;
    --gray-2:  #b8b8b8;
    --gray-3:  #777;
    --gray-4:  #333;
    --white:   #fff;

    --font-display: 'Cormorant Garamond', serif;
    --font-ui:      'Montserrat', sans-serif;
    --font-body:    'Inter', sans-serif;

    --sp-1: .25rem;  --sp-2: .5rem;   --sp-3: .75rem;  --sp-4: 1rem;
    --sp-5: 1.5rem;  --sp-6: 2rem;    --sp-7: 2.5rem;  --sp-8: 3rem;
    --sp-9: 4rem;    --sp-10: 5rem;   --sp-11: 6.25rem;

    --r-sm: .375rem;  --r-md: .75rem;  --r-lg: 1.5rem;  --r-full: 9999px;

    --shadow-md:   0 8px 24px rgba(0, 0, 0, .5);
    --shadow-gold: 0 0 24px var(--gold-glow), 0 0 60px rgba(201, 168, 76, .1);

    --ease-out:  cubic-bezier(.25, .1, .25, 1);
    --ease-expo: cubic-bezier(.16, 1, .3, 1);
    --t-fast: .18s var(--ease-out);
    --t-base: .3s  var(--ease-out);

    --container:  1200px;
    --section-py: clamp(4rem, 8vw, 6.25rem);
    --nav-h:      72px;

    --z-float: 100;
    --z-nav:   200;
    --z-modal: 1000;
  }
}

/* ══════════════ BASE ══════════════ */
@layer base {
  html { font-size: 16px; scroll-behavior: smooth; }
  body {
    background: var(--black);
    color: var(--white);
    font-family: var(--font-body);
    line-height: 1.65;
    overflow-x: hidden;
  }
  ::selection { background: var(--gold); color: var(--black); }
  ::-webkit-scrollbar { width: 5px; }
  ::-webkit-scrollbar-track { background: var(--black-2); }
  ::-webkit-scrollbar-thumb { background: var(--gold); border-radius: var(--r-full); }
  h1, h2, h3 { font-family: var(--font-display); font-weight: 700; line-height: 1.12; }
}

/* ══════════════ ANIMATIONS ══════════════ */
@layer animations {
  .reveal, .reveal-left, .reveal-right, .reveal-up {
    opacity: 0;
    transition: opacity .7s var(--ease-expo), transform .7s var(--ease-expo);
    transition-delay: var(--delay, 0s);
  }
  .reveal       { transform: translateY(28px); }
  .reveal-left  { transform: translateX(-48px); }
  .reveal-right { transform: translateX(48px); }
  .reveal-up    { transform: translateY(36px); }
  .reveal.visible, .reveal-left.visible,
  .reveal-right.visible, .reveal-up.visible { opacity: 1; transform: none; }

  @keyframes dotPulse   { 0%, 100% { opacity: .4; transform: scale(1); } 50% { opacity: 1; transform: scale(1.2); } }
  @keyframes scrollLine { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
  @keyframes goldShift  { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }
  @keyframes marquee    { 0% { transform: translateX(100vw); } 100% { transform: translateX(-100%); } }
  @keyframes heroPulse  { 0%, 100% { box-shadow: 0 4px 20px var(--gold-glow); } 50% { box-shadow: 0 6px 40px rgba(201,168,76,.55); } }
  @keyframes urgBlink   { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
  @keyframes wppPing    { 0% { transform: scale(1); opacity: .6; } 100% { transform: scale(1.65); opacity: 0; } }
  @keyframes waveMove   { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
  @keyframes popBounce  { 0% { transform: scale(1); } 40% { transform: scale(1.18); } 70% { transform: scale(.95); } 100% { transform: scale(1); } }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: .01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: .01ms !important;
      scroll-behavior: auto !important;
    }
    .reveal, .reveal-left, .reveal-right, .reveal-up {
      opacity: 1; transform: none; transition: none;
    }
    .vsec-glow-left, .vsec-glow-right { filter: none; }
    .hero-noise, .vthumb-grain, .vsec-noise { display: none; }
  }
}

/* ══════════════ LAYOUT ══════════════ */
@layer layout {
  .container { max-width: var(--container); margin: 0 auto; padding: 0 var(--sp-5); }
  .section-header { text-align: center; margin-bottom: var(--sp-9); }
  .section-tag {
    display: inline-block;
    font-family: var(--font-ui);
    font-size: .7rem; font-weight: 700;
    letter-spacing: .22em; text-transform: uppercase;
    color: var(--gold);
    border-left: 2px solid var(--gold);
    padding-left: var(--sp-3);
    margin-bottom: var(--sp-4);
  }
  .section-title {
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 4.5vw, 3.6rem);
    font-weight: 700; margin-bottom: .875rem;
  }
  .section-sub {
    font-size: .95rem; color: var(--gray-2);
    max-width: 520px; margin: 0 auto; line-height: 1.8;
  }
  .gold {
    background: var(--gold-grad);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

/* ══════════════ COMPONENTS ══════════════ */
@layer components {

  /* ── Buttons ── */
  .btn {
    display: inline-flex; align-items: center; gap: var(--sp-3);
    font-family: var(--font-ui); font-size: .88rem; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase;
    padding: 15px 32px; border-radius: var(--r-sm);
    transition: transform var(--t-fast), box-shadow var(--t-fast);
    position: relative; overflow: hidden;
  }
  .btn::after {
    content: ''; position: absolute; inset: 0;
    background: rgba(255, 255, 255, .1);
    transform: translateX(-100%); transition: transform .3s var(--ease-out);
  }
  .btn:hover::after { transform: translateX(0); }
  .btn:active { transform: scale(.97); }

  .btn-gold { background: var(--gold-grad); color: var(--black); box-shadow: 0 4px 20px var(--gold-glow); }
  .btn-gold:hover { transform: translateY(-2px); box-shadow: 0 8px 36px var(--gold-glow); }
  .btn-hero-pulse { animation: heroPulse 3s ease-in-out infinite; }

  .btn-ghost { background: transparent; color: var(--gray-1); border: 1px solid var(--gray-4); }
  .btn-ghost:hover { border-color: var(--gold); color: var(--gold); }

  .btn-video-peek { gap: 12px; }
  .play-mini {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: 50%;
    background: rgba(201, 168, 76, .15); border: 1px solid rgba(201, 168, 76, .4);
    font-size: .65rem; color: var(--gold); flex-shrink: 0;
    transition: background var(--t-fast);
  }
  .btn-video-peek:hover .play-mini { background: rgba(201, 168, 76, .28); }

  .btn-lg { padding: 18px 40px; font-size: 1rem; }
  .btn-xl { padding: 20px 52px; font-size: 1.05rem; }

  /* ── Navbar ── */
  .navbar {
    position: fixed; inset: 0 0 auto; z-index: var(--z-nav);
    transition: background var(--t-base), box-shadow var(--t-base);
  }
  .navbar.scrolled {
    background: rgba(0, 0, 0, .94);
    backdrop-filter: blur(14px);
    box-shadow: 0 1px 0 rgba(201, 168, 76, .25);
  }
  .nav-container {
    max-width: var(--container); margin: 0 auto; padding: 0 var(--sp-5);
    display: flex; align-items: center; justify-content: space-between;
    height: var(--nav-h);
  }
  .nav-logo { display: flex; align-items: center; }
  .logo-img {
    height: 54px; width: auto;
    filter: drop-shadow(0 0 8px var(--gold-glow));
    transition: filter var(--t-fast);
  }
  .logo-img:hover { filter: drop-shadow(0 0 12px rgba(201, 168, 76, .5)); }

  .nav-links { display: flex; align-items: center; gap: 2px; }
  .nav-link {
    font-family: var(--font-ui); font-size: .78rem; font-weight: 600;
    letter-spacing: .1em; text-transform: uppercase;
    color: var(--gray-2); padding: 8px 14px; border-radius: var(--r-sm);
    transition: color var(--t-fast); position: relative;
  }
  .nav-link::after {
    content: ''; position: absolute; bottom: 4px; left: 14px; right: 14px;
    height: 1px; background: var(--gold);
    transform: scaleX(0); transition: transform var(--t-base);
  }
  .nav-link:hover { color: var(--white); }
  .nav-link:hover::after { transform: scaleX(1); }

  .nav-cta {
    display: inline-flex; align-items: center; gap: 7px;
    font-family: var(--font-ui); font-size: .78rem; font-weight: 700;
    letter-spacing: .09em; text-transform: uppercase;
    color: var(--black); background: var(--gold-grad);
    padding: 9px 22px; border-radius: var(--r-sm); margin-left: var(--sp-3);
    transition: transform var(--t-fast), box-shadow var(--t-fast);
  }
  .nav-cta:hover { transform: translateY(-1px); box-shadow: 0 6px 20px var(--gold-glow); }

  .nav-toggle { display: none; flex-direction: column; gap: 5px; padding: 8px; }
  .nav-toggle span {
    display: block; width: 26px; height: 2px;
    background: var(--white); border-radius: 2px; transition: var(--t-base);
  }

  /* ── Hero ── */
  .hero {
    position: relative; min-height: 100vh;
    display: flex; flex-direction: column; justify-content: center;
    padding-top: var(--nav-h); overflow: hidden;
  }
  .hero-bg { position: absolute; inset: 0; z-index: 0; }
  .hero-overlay {
    position: absolute; inset: 0;
    background:
      radial-gradient(ellipse 120% 80% at 50% 0%, rgba(201,168,76,.08) 0%, transparent 60%),
      linear-gradient(to bottom, rgba(0,0,0,.15) 0%, rgba(0,0,0,.75) 100%),
      var(--black-2);
  }
  .hero-glow-left {
    position: absolute; top: -20%; left: -20%; width: 60%; height: 80%;
    border-radius: 50%; pointer-events: none;
    background: radial-gradient(circle, rgba(201,168,76,.07) 0%, transparent 70%);
  }
  .hero-glow-right {
    position: absolute; bottom: -20%; right: -10%; width: 50%; height: 70%;
    border-radius: 50%; pointer-events: none;
    background: radial-gradient(circle, rgba(201,168,76,.05) 0%, transparent 70%);
  }
  .hero-noise {
    position: absolute; inset: 0; opacity: .03;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 256px;
  }
  .hero-grid-lines {
    position: absolute; inset: 0; pointer-events: none;
    background-image:
      linear-gradient(rgba(201,168,76,.025) 1px, transparent 1px),
      linear-gradient(90deg, rgba(201,168,76,.025) 1px, transparent 1px);
    background-size: 80px 80px;
    mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, black 0%, transparent 80%);
  }
  .hero-content {
    position: relative; z-index: 2;
    padding: var(--sp-10) var(--sp-5) var(--sp-8);
    max-width: var(--container); margin: 0 auto; width: 100%;
  }
  .hero-badge {
    display: inline-flex; align-items: center; gap: var(--sp-2);
    font-family: var(--font-ui); font-size: .72rem; font-weight: 600;
    letter-spacing: .18em; text-transform: uppercase; color: var(--gold);
    border: 1px solid rgba(201,168,76,.3); background: rgba(201,168,76,.06);
    padding: 7px 16px; border-radius: var(--r-full); margin-bottom: var(--sp-6);
  }
  .badge-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--gold); box-shadow: 0 0 6px var(--gold);
    animation: dotPulse 2s ease-in-out infinite;
  }
  .hero-title {
    display: flex; flex-direction: column;
    font-family: var(--font-display); font-weight: 700; line-height: 1;
    margin-bottom: var(--sp-5);
  }
  .ht-1 { font-size: clamp(2.4rem, 6vw, 5.2rem); color: var(--white); }
  .ht-2 {
    font-size: clamp(2.8rem, 7.5vw, 6.4rem);
    background: var(--gold-grad);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .ht-2 em { font-style: italic; }
  .ht-3 { font-size: clamp(2.4rem, 6vw, 5.2rem); color: var(--gray-1); }

  .hero-sub {
    font-size: clamp(1rem, 2vw, 1.15rem); color: var(--gray-2);
    max-width: 560px; margin-bottom: var(--sp-5); line-height: 1.8;
  }
  .hero-trust {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: 12px 16px; margin-bottom: var(--sp-7);
  }
  .trust-item {
    font-family: var(--font-ui); font-size: .8rem; font-weight: 600;
    color: var(--gray-2); letter-spacing: .05em;
    display: flex; align-items: center; gap: 6px;
  }
  .trust-sep { color: var(--gray-4); }
  .hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: var(--sp-4); }
  .hero-disclaimer {
    font-family: var(--font-ui); font-size: .75rem;
    color: var(--gray-3); letter-spacing: .06em;
  }
  .hero-scroll {
    position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%);
    display: flex; flex-direction: column; align-items: center; gap: 8px; z-index: 2;
  }
  .hero-scroll span {
    font-family: var(--font-ui); font-size: .6rem;
    letter-spacing: .3em; color: var(--gray-3);
  }
  .scroll-line {
    width: 1px; height: 44px;
    background: linear-gradient(to bottom, var(--gold), transparent);
    animation: scrollLine 2s ease-in-out infinite;
  }
  .hero-stats {
    position: relative; z-index: 2; display: flex;
    border-top: 1px solid rgba(201,168,76,.18);
    max-width: var(--container); width: 100%;
    margin: auto auto 0; padding: 0 var(--sp-5);
  }
  .stat {
    flex: 1; padding: var(--sp-5) var(--sp-4); text-align: center;
    border-right: 1px solid rgba(201,168,76,.12);
    transition: background var(--t-fast);
  }
  .stat:last-child { border-right: none; }
  .stat:hover { background: rgba(201,168,76,.04); }
  .stat-num {
    display: inline; font-family: var(--font-display);
    font-size: 2.4rem; font-weight: 700; line-height: 1;
    background: var(--gold-grad);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .stat-pct {
    font-family: var(--font-display); font-size: 1.4rem;
    background: var(--gold-grad);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .stat-label {
    display: block; font-family: var(--font-ui); font-size: .72rem;
    letter-spacing: .14em; text-transform: uppercase;
    color: var(--gray-3); margin-top: 4px;
  }

  /* ── Urgency / value strip ── */
  .urgency-strip {
    background: linear-gradient(90deg, #8b6914, #c9a84c, #f0d678, #c9a84c, #8b6914);
    background-size: 200% 100%;
    animation: goldShift 4s linear infinite;
    padding: 10px 0; overflow: hidden;
  }
  .urgency-inner {
    font-family: var(--font-ui); font-size: .78rem; font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase; color: var(--black);
    white-space: nowrap; display: inline-block;
    animation: marquee 34s linear infinite;
  }

  /* ── Video section ── */
  .video-section {
    position: relative; padding: var(--section-py) 0;
    background: #0b0c0e; overflow: hidden; isolation: isolate;
  }
  .video-section-bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
  .vsec-glow-left, .vsec-glow-right {
    position: absolute; width: 600px; height: 600px; border-radius: 50%;
    filter: blur(140px); opacity: .22;
  }
  .vsec-glow-left  { background: radial-gradient(circle, rgba(212,175,55,.3) 0%, transparent 70%); top: -200px; left: -200px; }
  .vsec-glow-right { background: radial-gradient(circle, rgba(212,175,55,.15) 0%, transparent 70%); bottom: -200px; right: -200px; }
  .vsec-noise {
    position: absolute; inset: 0; opacity: .5; mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  }
  .video-section .container { position: relative; z-index: 2; }
  .video-section-inner {
    display: grid; grid-template-columns: 1fr 1.1fr;
    gap: var(--sp-9); align-items: center;
  }
  .video-text-col { color: var(--white); }
  .video-text-col .section-tag {
    background: rgba(212,175,55,.12); border: 1px solid rgba(212,175,55,.3);
    border-left: none; backdrop-filter: blur(8px);
    padding: 7px 14px; border-radius: var(--r-full);
  }
  .video-headline {
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 5vw, 3.4rem);
    font-weight: 700; line-height: 1.15; margin-bottom: var(--sp-5);
  }
  .video-headline em.gold { font-style: italic; }
  .video-desc {
    font-size: 1.05rem; color: rgba(255,255,255,.75);
    margin-bottom: var(--sp-7); max-width: 520px; line-height: 1.75;
  }
  .video-trust-pills {
    display: flex; flex-direction: column; gap: var(--sp-4); margin-bottom: var(--sp-6);
  }
  .vtrust-pill {
    display: flex; align-items: center; gap: var(--sp-4);
    background: rgba(255,255,255,.03); border: 1px solid rgba(212,175,55,.15);
    border-radius: var(--r-full); padding: 14px 22px; backdrop-filter: blur(4px);
    transition: background var(--t-base), border-color var(--t-base), transform var(--t-base);
  }
  .vtrust-pill:hover {
    background: rgba(212,175,55,.08); border-color: rgba(212,175,55,.4);
    transform: translateX(8px);
  }
  .vtrust-icon { font-size: 1.6rem; line-height: 1; }
  .vtrust-pill > div { display: flex; flex-direction: column; }
  .vtrust-pill strong { font-size: .95rem; font-weight: 700; color: var(--white); }
  .vtrust-pill span { font-size: .82rem; color: rgba(255,255,255,.6); }

  .video-player-col { position: relative; }
  .video-frame-outer {
    position: relative; border-radius: 32px; padding: 3px;
    background: linear-gradient(145deg, rgba(212,175,55,.4) 0%, transparent 80%);
    box-shadow: 0 30px 50px -10px rgba(0,0,0,.8);
  }
  .video-corner-tl, .video-corner-tr, .video-corner-bl, .video-corner-br {
    position: absolute; width: 28px; height: 28px;
    border-style: solid; border-color: var(--gold); z-index: 2;
  }
  .video-corner-tl { top: -2px; left: -2px; border-width: 3px 0 0 3px; border-radius: 12px 0 0 0; }
  .video-corner-tr { top: -2px; right: -2px; border-width: 3px 3px 0 0; border-radius: 0 12px 0 0; }
  .video-corner-bl { bottom: -2px; left: -2px; border-width: 0 0 3px 3px; border-radius: 0 0 0 12px; }
  .video-corner-br { bottom: -2px; right: -2px; border-width: 0 3px 3px 0; border-radius: 0 0 12px 0; }

  .video-thumbnail {
    position: relative; aspect-ratio: 16/9; background: #0a0b0e;
    border-radius: 28px; overflow: hidden; cursor: pointer;
    transition: box-shadow var(--t-base);
  }
  .video-thumbnail:hover { box-shadow: 0 0 40px rgba(212,175,55,.25); }
  .vthumb-backdrop {
    position: absolute; inset: 0; z-index: 1;
    background: radial-gradient(circle at 30% 40%, #1a1c20 0%, #0b0c0e 100%);
  }
  .vthumb-grain {
    position: absolute; inset: 0; z-index: 1; pointer-events: none;
    opacity: .5; mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.08'/%3E%3C/svg%3E");
  }
  .vthumb-owner-icon {
    position: absolute; top: 22px; left: 22px; z-index: 3;
    display: flex; align-items: center; gap: 12px;
    background: rgba(0,0,0,.5); backdrop-filter: blur(12px);
    padding: 8px 16px 8px 10px; border-radius: var(--r-full);
    border: 1px solid rgba(212,175,55,.3);
  }
  .owner-avatar {
    width: 42px; height: 42px; flex-shrink: 0; border-radius: 50%;
    background: var(--gold-grad);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 12px rgba(0,0,0,.4);
  }
  .owner-initial { font-family: var(--font-ui); font-size: 1.3rem; font-weight: 700; color: var(--black); }
  .owner-info { display: flex; flex-direction: column; }
  .owner-info strong { font-size: .88rem; font-weight: 700; color: var(--white); line-height: 1.3; }
  .owner-info span { font-size: .75rem; color: var(--gold-light); }

  .vthumb-duration {
    position: absolute; bottom: 22px; right: 22px; z-index: 3;
    background: rgba(0,0,0,.7); backdrop-filter: blur(8px);
    color: var(--white); font-size: .85rem; font-weight: 600;
    padding: 6px 14px; border-radius: var(--r-full);
    border: 1px solid rgba(255,255,255,.1);
  }
  .play-btn {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 4;
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    transition: transform .2s var(--ease-out);
  }
  .play-btn:hover { transform: translate(-50%, -52%); }
  .play-btn-outer {
    width: 96px; height: 96px; border-radius: 50%;
    background: rgba(212,175,55,.2); backdrop-filter: blur(8px);
    display: flex; align-items: center; justify-content: center;
    border: 1px solid rgba(212,175,55,.5);
    box-shadow: 0 0 40px rgba(212,175,55,.4), 0 8px 20px rgba(0,0,0,.5);
    transition: background var(--t-base), box-shadow var(--t-base);
  }
  .play-btn-inner {
    width: 66px; height: 66px; border-radius: 50%;
    background: var(--gold-grad);
    display: flex; align-items: center; justify-content: center;
    transition: transform .2s var(--ease-out);
  }
  .play-btn:hover .play-btn-outer {
    background: rgba(212,175,55,.35);
    box-shadow: 0 0 60px rgba(212,175,55,.6), 0 8px 20px rgba(0,0,0,.6);
  }
  .play-btn:hover .play-btn-inner { transform: scale(1.05); }
  .play-btn svg { color: var(--black); margin-left: 4px; }
  .play-label {
    font-family: var(--font-ui); font-size: .82rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .15em; color: var(--white);
    text-shadow: 0 2px 8px rgba(0,0,0,.6);
    background: rgba(0,0,0,.4); backdrop-filter: blur(4px);
    padding: 6px 16px; border-radius: var(--r-full);
    border: 1px solid rgba(255,255,255,.1);
  }
  .vthumb-wave {
    position: absolute; bottom: 0; left: 0; z-index: 2; pointer-events: none;
    width: 200%; height: 60px; opacity: .6;
    background: repeating-linear-gradient(transparent 0, transparent 25px, rgba(212,175,55,.07) 25px, rgba(212,175,55,.07) 50px);
  }
  .vthumb-wave-1 { animation: waveMove 12s linear infinite; }
  .vthumb-wave-2 { animation: waveMove 8s linear infinite reverse; opacity: .4; }

  .video-quote { margin-top: var(--sp-6); padding-left: var(--sp-5); border-left: 3px solid var(--gold); }
  .vquote-mark { font-size: 3rem; line-height: 0; color: var(--gold); opacity: .4; font-family: serif; }
  .video-quote p {
    font-size: 1rem; color: rgba(255,255,255,.8);
    margin: -4px 0 12px; line-height: 1.7; white-space: pre-line;
  }
  .vquote-author { font-size: .88rem; color: var(--gold); letter-spacing: .03em; }

  /* ── Video modal ── */
  .video-modal {
    position: fixed; inset: 0; z-index: var(--z-modal);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none; transition: opacity .3s var(--ease-out);
  }
  .video-modal.active { opacity: 1; pointer-events: auto; }
  .vmodal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.92); backdrop-filter: blur(16px); }
  .vmodal-content {
    position: relative; width: 90%; max-width: 1100px;
    border-radius: 24px; overflow: hidden;
    box-shadow: 0 40px 80px rgba(0,0,0,.8), 0 0 0 1px rgba(212,175,55,.25);
    transform: scale(.95); transition: transform .35s var(--ease-expo);
  }
  .video-modal.active .vmodal-content { transform: scale(1); }
  .vmodal-close {
    position: absolute; top: 16px; right: 16px; z-index: 10;
    width: 44px; height: 44px; border-radius: 50%;
    background: rgba(0,0,0,.6); backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,.15); color: var(--white);
    display: flex; align-items: center; justify-content: center;
    transition: background .2s var(--ease-out), color .2s, transform .2s;
  }
  .vmodal-close:hover { background: var(--gold); color: var(--black); transform: scale(1.1); }
  .vmodal-player { position: relative; aspect-ratio: 16/9; background: var(--black); }
  .vmodal-player video { width: 100%; height: 100%; object-fit: contain; }
  .vmodal-placeholder {
    display: none; position: absolute; inset: 0;
    flex-direction: column; align-items: center; justify-content: center;
    background: #0b0c0e; color: var(--white); text-align: center; padding: var(--sp-5);
  }
  .vmodal-placeholder.visible { display: flex; }
  .vph-icon { font-size: 3.5rem; margin-bottom: var(--sp-4); }
  .vmodal-placeholder h3 { font-size: 1.6rem; margin-bottom: var(--sp-3); }
  .vmodal-placeholder p { color: rgba(255,255,255,.6); margin-bottom: var(--sp-5); }

  /* ── Produtos ── */
  .produtos { padding: var(--section-py) 0; background: var(--black); }
  .produtos-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
  .produtos-grid .produto-card:nth-child(4n+1) { --delay: 0s; }
  .produtos-grid .produto-card:nth-child(4n+2) { --delay: .08s; }
  .produtos-grid .produto-card:nth-child(4n+3) { --delay: .16s; }
  .produtos-grid .produto-card:nth-child(4n+4) { --delay: .24s; }

  .produto-card {
    display: flex; flex-direction: column;
    background: var(--black-3); border: 1px solid var(--gray-4);
    border-radius: var(--r-md); overflow: hidden; will-change: transform;
    transition: border-color var(--t-base), box-shadow var(--t-base), transform var(--t-base);
  }
  .produto-card:hover { border-color: var(--gold); box-shadow: var(--shadow-gold); transform: translateY(-6px); }
  .card-img-wrap { position: relative; aspect-ratio: 1/1; background: #fff; overflow: hidden; cursor: zoom-in; }
  .card-img { width: 100%; height: 100%; object-fit: contain; transition: transform .5s var(--ease-expo); }
  .produto-card:hover .card-img { transform: scale(1.06); }
  .card-img-fallback {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    font-size: 3rem; color: var(--gray-4); background: var(--black-4);
  }
  .card-img-glow {
    position: absolute; inset: 0; z-index: 1; pointer-events: none; background: transparent;
    transition: background .4s var(--ease-out);
  }
  .produto-card:hover .card-img-glow {
    background: radial-gradient(circle at 50% 50%, rgba(201,168,76,.08), transparent 70%);
  }
  .card-label {
    position: absolute; top: 12px; left: 12px; z-index: 2;
    font-family: var(--font-ui); font-size: .65rem; font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase;
    padding: 5px 10px; border-radius: var(--r-full);
  }
  .card-label.hot  { background: rgba(255,80,0,.92);  color: var(--white); }
  .card-label.new  { background: rgba(201,168,76,.92); color: var(--black); }
  .card-label.sale { background: rgba(37,211,102,.92); color: var(--black); }
  .card-body { padding: 18px; display: flex; flex-direction: column; flex: 1; }
  .card-name { font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; margin-bottom: 6px; line-height: 1.25; }
  .card-desc {
    font-size: .82rem; color: var(--gray-3); line-height: 1.65; margin-bottom: 10px;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
    transition: max-height .45s var(--ease-out);
  }
  .card-prices { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
  .price-old { font-family: var(--font-ui); font-size: .8rem; color: var(--gray-3); text-decoration: line-through; }
  .price-curr {
    font-family: var(--font-ui); font-size: 1.2rem; font-weight: 800;
    background: var(--gold-grad);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  }
  .price-curr.consult { font-size: .9rem; }
  .price-off {
    font-family: var(--font-ui); font-size: .7rem; font-weight: 700;
    background: rgba(37,211,102,.15); color: var(--wpp);
    padding: 3px 7px; border-radius: 3px;
  }
  .card-stock {
    font-family: var(--font-ui); font-size: .72rem; font-weight: 600;
    color: var(--gray-2); letter-spacing: .04em; margin-bottom: 12px;
    display: flex; align-items: center; gap: 6px;
  }
  .stock-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--wpp); flex-shrink: 0; }
  .btn-card {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    font-family: var(--font-ui); font-size: .8rem; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase; color: var(--black);
    background: var(--gold-grad); padding: 12px 16px; border-radius: var(--r-sm);
    margin-top: auto; position: relative; overflow: hidden;
    transition: transform var(--t-fast), box-shadow var(--t-fast);
  }
  .btn-card::after {
    content: ''; position: absolute; inset: 0; background: rgba(255,255,255,.12);
    transform: translateX(-100%); transition: transform .3s var(--ease-out);
  }
  .btn-card:hover::after { transform: translateX(0); }
  .btn-card:hover { transform: translateY(-2px); box-shadow: 0 6px 24px var(--gold-glow); }
  .produtos-cta {
    text-align: center; margin-top: var(--sp-9);
    display: flex; flex-direction: column; align-items: center; gap: var(--sp-4);
  }
  .produtos-cta p { color: var(--gray-3); font-size: .95rem; }

  /* ── Benefícios ── */
  .beneficios { padding: var(--section-py) 0; background: var(--black-2); position: relative; overflow: hidden; }
  .bene-bg-text {
    position: absolute; top: 50%; right: -40px; transform: translateY(-50%);
    font-family: var(--font-display); font-size: clamp(8rem, 18vw, 18rem); line-height: 1;
    background: linear-gradient(135deg, rgba(201,168,76,.04), transparent);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    pointer-events: none; user-select: none;
  }
  .beneficios-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
    position: relative; z-index: 1;
  }
  .beneficios-grid .beneficio-card:nth-child(1) { --delay: 0s; }
  .beneficios-grid .beneficio-card:nth-child(2) { --delay: .08s; }
  .beneficios-grid .beneficio-card:nth-child(3) { --delay: .16s; }
  .beneficios-grid .beneficio-card:nth-child(4) { --delay: .24s; }
  .beneficios-grid .beneficio-card:nth-child(5) { --delay: .32s; }
  .beneficios-grid .beneficio-card:nth-child(6) { --delay: .4s; }
  .beneficio-card {
    padding: 30px 26px; background: var(--black-3);
    border: 1px solid var(--gray-4); border-top: 2px solid transparent;
    border-radius: var(--r-md);
    transition: border-top-color var(--t-base), box-shadow var(--t-base), transform var(--t-base);
  }
  .beneficio-card:hover {
    border-top-color: var(--gold);
    box-shadow: 0 8px 32px rgba(201,168,76,.12);
    transform: translateY(-4px);
  }
  .bene-icon-wrap {
    font-size: 2.2rem; margin-bottom: var(--sp-4); display: block;
    filter: drop-shadow(0 2px 8px rgba(201,168,76,.2));
  }
  .beneficio-card h3 {
    font-family: var(--font-ui); font-size: 1rem; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase; margin-bottom: 10px; color: var(--white);
  }
  .beneficio-card p { font-size: .87rem; color: var(--gray-3); line-height: 1.75; }

  /* ── CTA Mid ── */
  .cta-mid { position: relative; padding: var(--section-py) 0; overflow: hidden; }
  .cta-mid-bg {
    position: absolute; inset: 0;
    background: radial-gradient(ellipse 70% 80% at 50% 50%, rgba(201,168,76,.09) 0%, transparent 70%), var(--black-3);
  }
  .cta-mid-inner { position: relative; z-index: 1; text-align: center; }
  .cta-mid-tag {
    display: inline-block; font-family: var(--font-ui); font-size: .72rem; font-weight: 700;
    letter-spacing: .2em; text-transform: uppercase; color: var(--gold); margin-bottom: var(--sp-4);
  }
  .cta-mid-title {
    font-family: var(--font-display); font-size: clamp(2.4rem, 5.5vw, 4rem);
    font-weight: 700; margin-bottom: 14px; line-height: 1.1;
  }
  .cta-mid-sub { color: var(--gray-2); max-width: 480px; margin: 0 auto var(--sp-7); line-height: 1.8; }
  .cta-mid-note { font-family: var(--font-ui); font-size: .78rem; color: var(--gray-3); margin-top: var(--sp-4); letter-spacing: .06em; }

  /* ── Contato final ── */
  .contato-final { position: relative; padding: var(--sp-11) 0; overflow: hidden; }
  .cf-bg {
    position: absolute; inset: 0;
    background: radial-gradient(ellipse 90% 60% at 50% 50%, rgba(201,168,76,.1) 0%, transparent 70%), var(--black-2);
  }
  .cf-inner { position: relative; z-index: 1; text-align: center; display: flex; flex-direction: column; align-items: center; }
  .cf-wpp-icon { color: var(--wpp); margin-bottom: var(--sp-5); filter: drop-shadow(0 0 16px var(--wpp-glow)); }
  .cf-sub { color: var(--gray-2); max-width: 440px; margin-bottom: var(--sp-7); line-height: 1.8; }
  .cf-badges { display: flex; gap: var(--sp-4); flex-wrap: wrap; justify-content: center; margin-top: var(--sp-5); }
  .cf-badges span {
    font-family: var(--font-ui); font-size: .75rem; font-weight: 600;
    letter-spacing: .08em; color: var(--gray-3);
    background: rgba(255,255,255,.04); border: 1px solid var(--gray-4);
    padding: 6px 14px; border-radius: var(--r-full);
  }

  /* ── Footer ── */
  .footer { background: var(--black); border-top: 1px solid var(--gray-4); padding: var(--sp-9) 0 var(--sp-5); }
  .footer-top { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--sp-9); margin-bottom: var(--sp-7); }
  .footer-logo-txt { display: flex; flex-direction: column; line-height: .9; margin-bottom: var(--sp-4); }
  .logo-lual {
    font-family: var(--font-display); font-size: 2rem; font-weight: 700;
    background: var(--gold-grad);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  }
  .logo-var { font-family: var(--font-ui); font-size: .62rem; letter-spacing: .28em; text-transform: uppercase; color: var(--gray-3); }
  .footer-brand p { font-size: .87rem; color: var(--gray-3); line-height: 1.75; max-width: 260px; }
  .footer-links h4, .footer-contact-col h4 {
    font-family: var(--font-ui); font-size: .7rem; font-weight: 700;
    letter-spacing: .22em; text-transform: uppercase; color: var(--gray-3); margin-bottom: var(--sp-4);
  }
  .footer-links ul { display: flex; flex-direction: column; gap: var(--sp-2); }
  .footer-links a { font-size: .9rem; color: var(--gray-3); transition: color var(--t-fast); }
  .footer-links a:hover { color: var(--gold); }
  .footer-wpp-link {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--font-ui); font-size: .9rem; font-weight: 700;
    color: var(--wpp); transition: opacity var(--t-fast);
  }
  .footer-wpp-link:hover { opacity: .8; }
  .footer-bottom {
    border-top: 1px solid var(--gray-4); padding-top: var(--sp-5);
    display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--sp-3);
  }
  .footer-bottom p { font-family: var(--font-ui); font-size: .78rem; color: var(--gray-3); letter-spacing: .06em; }

  /* ── Assinatura DevCode (crédito premium) ── */
  .devsig {
    position: relative; isolation: isolate; overflow: hidden;
    display: inline-flex; align-items: center; gap: 12px;
    padding: 10px 16px; border-radius: var(--r-full);
    background: linear-gradient(135deg, rgba(201,168,76,.08), rgba(255,255,255,.02));
    border: 1px solid rgba(201,168,76,.22); backdrop-filter: blur(8px);
    transition: transform var(--t-base), border-color var(--t-base), box-shadow var(--t-base);
  }
  .devsig__glow {
    position: absolute; inset: 0; z-index: -1; opacity: 0;
    background: radial-gradient(circle at 22% 50%, var(--gold-glow), transparent 70%);
    transition: opacity var(--t-base);
  }
  .devsig:hover, .devsig:focus-visible {
    transform: translateY(-3px); border-color: rgba(201,168,76,.55);
    box-shadow: 0 10px 30px rgba(0,0,0,.4), 0 0 22px var(--gold-glow);
  }
  .devsig:hover .devsig__glow, .devsig:focus-visible .devsig__glow { opacity: 1; }
  .devsig__mark {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; flex-shrink: 0; border-radius: 9px;
    font-family: var(--font-ui); font-size: .8rem; font-weight: 800; letter-spacing: -.02em;
    color: var(--black); background: var(--gold-grad); box-shadow: 0 4px 12px var(--gold-glow);
    transition: transform var(--t-base);
  }
  .devsig:hover .devsig__mark { transform: rotate(-6deg) scale(1.06); }
  .devsig__body { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
  .devsig__label {
    font-family: var(--font-ui); font-size: .58rem; font-weight: 600;
    letter-spacing: .18em; text-transform: uppercase; color: var(--gray-3);
  }
  .devsig__brand { font-family: var(--font-ui); font-size: .82rem; font-weight: 600; color: var(--gray-1); }
  .devsig__brand strong {
    font-weight: 800; background: var(--gold-grad);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  }
  .devsig__arrow { display: inline-flex; flex-shrink: 0; color: var(--gold); transition: transform var(--t-base); }
  .devsig:hover .devsig__arrow, .devsig:focus-visible .devsig__arrow { transform: translateX(4px); }
  .devsig::after {
    content: ""; position: absolute; top: 0; left: -150%; width: 55%; height: 100%; pointer-events: none;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.18), transparent);
    transform: skewX(-18deg); transition: left .6s var(--ease-out);
  }
  .devsig:hover::after, .devsig:focus-visible::after { left: 150%; }
  .devsig__tip {
    position: absolute; bottom: calc(100% + 10px); left: 50%;
    transform: translateX(-50%) translateY(6px) scale(.9); white-space: nowrap;
    font-family: var(--font-ui); font-size: .68rem; font-weight: 700; letter-spacing: .04em;
    color: var(--black); background: var(--gold-grad);
    padding: 6px 12px; border-radius: var(--r-full);
    opacity: 0; pointer-events: none; box-shadow: 0 6px 18px rgba(0,0,0,.4);
    transition: opacity .3s var(--ease-out), transform .4s var(--ease-expo);
  }
  .devsig__tip::after {
    content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
    border: 5px solid transparent; border-top-color: var(--gold);
  }
  .devsig:hover .devsig__tip, .devsig:focus-visible .devsig__tip {
    opacity: 1; transform: translateX(-50%) translateY(0) scale(1);
  }
  @media (prefers-reduced-motion: reduce) {
    .devsig::after { display: none; }
    .devsig__tip { transition: opacity .2s; }
  }
  .footer-motto {
    background: var(--gold-grad);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    opacity: .7;
  }

  /* ── Float WhatsApp ── */
  .float-whatsapp {
    position: fixed; bottom: var(--sp-5); right: var(--sp-5); z-index: var(--z-float);
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    transition: transform var(--t-fast);
  }
  .float-whatsapp:hover { transform: scale(1.05); }
  .float-wpp-btn {
    position: relative; width: 60px; height: 60px; border-radius: 50%;
    background: var(--wpp); color: var(--white);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 20px var(--wpp-glow); transition: box-shadow var(--t-fast);
  }
  .float-whatsapp:hover .float-wpp-btn { box-shadow: 0 8px 32px var(--wpp-glow); }
  .float-label {
    font-family: var(--font-ui); font-size: .6rem; font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase; color: var(--wpp);
  }
  .float-pulse {
    position: absolute; inset: 0; border-radius: 50%;
    border: 2px solid var(--wpp); pointer-events: none;
    animation: wppPing 2s ease-out infinite;
  }
  .float-whatsapp.pop .float-wpp-btn { animation: popBounce .4s var(--ease-expo); }

  /* Cursor glow (ambient desktop only — NÃO esconde o cursor do sistema) */
  .cursor-glow {
    position: fixed; top: 0; left: 0; z-index: 0; pointer-events: none;
    width: 300px; height: 300px; border-radius: 50%;
    background: radial-gradient(circle, rgba(201,168,76,.055) 0%, transparent 70%);
    transform: translate(-50%, -50%); will-change: transform;
  }
}

/* ══════════════ RESPONSIVE ══════════════ */
@layer responsive {
  @media (max-width: 1100px) {
    .produtos-grid { grid-template-columns: repeat(3, 1fr); }
  }
  @media (max-width: 1024px) {
    .beneficios-grid { grid-template-columns: repeat(2, 1fr); }
    .footer-top { grid-template-columns: 1fr 1fr; }
    .footer-brand { grid-column: 1 / -1; }
    .video-section-inner { grid-template-columns: 1fr; gap: var(--sp-8); }
    .video-text-col { text-align: center; max-width: 600px; margin: 0 auto; }
    .video-desc, .video-trust-pills { margin-left: auto; margin-right: auto; }
    .video-trust-pills { max-width: 480px; }
    .video-text-col .btn { margin-left: auto; margin-right: auto; }
    .video-quote { max-width: 560px; margin-left: auto; margin-right: auto; }
  }
  @media (max-width: 768px) {
    :root { --section-py: clamp(3rem, 6vw, 4rem); }

    /* ===== MENU MOBILE — overlay full-screen, revelação por clip-path
       (mesma assinatura do site do Rafael, adaptada ao dourado da Lual) ===== */
    .nav-toggle { display: flex; z-index: calc(var(--z-nav) + 2); }

    .nav-links {
      position: fixed; inset: 0;
      width: 100%; height: 100dvh;
      display: flex; flex-direction: column; align-items: stretch; gap: 0;
      padding: calc(var(--nav-h) + var(--sp-5)) clamp(1.5rem, 8vw, 3rem) clamp(2rem, 6vw, 3rem);
      background: var(--black);
      background-image:
        radial-gradient(ellipse 100% 80% at 100% 0%, rgba(201,168,76,.16), transparent 70%),
        radial-gradient(ellipse 80% 70% at 0% 100%, rgba(201,168,76,.10), transparent 70%),
        linear-gradient(rgba(201,168,76,.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(201,168,76,.03) 1px, transparent 1px);
      background-size: auto, auto, 60px 60px, 60px 60px;
      overflow-y: auto; overscroll-behavior: contain;
      z-index: calc(var(--z-nav) + 1);
      clip-path: circle(0% at calc(100% - 44px) 44px);
      visibility: hidden;
      transition: clip-path .64s var(--ease-out), visibility 0ms linear .64s;
      isolation: isolate;
    }
    .nav-links.open {
      clip-path: circle(150% at calc(100% - 44px) 44px);
      visibility: visible;
      transition: clip-path .74s cubic-bezier(.22,1,.36,1), visibility 0ms;
    }

    /* Cortina dourada removida: em navegadores in-app (ex.: Instagram) e em
       cliques que interrompiam a animação, ela congelava no meio da varredura
       e cobria a tela. A revelação por clip-path + stagger já basta. */

    /* Linha de marca correndo no topo */
    .nav-links::after {
      content: ""; position: absolute; z-index: 1;
      inset-block-start: calc(var(--nav-h) + var(--sp-3));
      inset-inline: clamp(1.5rem, 8vw, 3rem);
      height: 2px; transform: scaleX(0); transform-origin: left;
      background: linear-gradient(90deg, var(--gold) 0%, var(--gold-light) 50%, transparent 100%);
      transition: transform .5s ease .28s;
    }
    .nav-links.open::after { transform: scaleX(1); }

    /* Cabeçalho do menu (eyebrow + fechar) */
    .nav-menu-head {
      display: flex; align-items: center; justify-content: space-between;
      margin-bottom: var(--sp-6);
    }
    .nav-eyebrow {
      font-family: var(--font-ui); font-size: .66rem; font-weight: 700;
      letter-spacing: .28em; text-transform: uppercase; color: var(--gold);
    }
    .nav-close {
      display: inline-flex; align-items: center; justify-content: center;
      width: 42px; height: 42px; border-radius: 50%;
      color: var(--white); border: 1px solid var(--gray-4); background: rgba(255,255,255,.03);
      transition: background var(--t-fast), color var(--t-fast), transform var(--t-base);
    }
    .nav-close:hover { background: var(--gold); color: var(--black); transform: rotate(90deg); }

    /* Links — tipografia editorial */
    .nav-links li { width: 100%; }
    .nav-link {
      display: block; padding: 14px 0; border-radius: 0;
      font-family: var(--font-display); font-weight: 600;
      font-size: clamp(1.8rem, 8vw, 2.4rem); letter-spacing: .01em;
      color: var(--gray-1); border-bottom: 1px solid rgba(201,168,76,.12);
    }
    .nav-link::after { display: none; }
    .nav-link:hover { color: var(--gold); }
    .nav-cta { margin: var(--sp-5) 0 0; padding: 15px 24px; width: 100%; justify-content: center; font-size: .85rem; }
    .nav-links li:last-child { margin-top: auto; }

    /* Entrada dos itens em stagger, vindo da direita */
    .nav-links li {
      opacity: 0; transform: translateX(40px); filter: blur(6px);
      transition: opacity .5s var(--ease-expo), transform .5s var(--ease-expo), filter .5s var(--ease-expo);
    }
    .nav-links.open li {
      opacity: 1; transform: none; filter: blur(0);
      transition-delay: calc(.07s * var(--i, 0) + .26s);
    }

    .nav-toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .nav-toggle.active span:nth-child(2) { opacity: 0; }
    .nav-toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    .ht-1, .ht-3 { font-size: clamp(2rem, 10vw, 3rem); }
    .ht-2 { font-size: clamp(2.4rem, 12vw, 3.6rem); }
    .hero-actions { flex-direction: column; align-items: flex-start; }
    .hero-actions .btn { width: 100%; justify-content: center; }
    .hero-stats { flex-direction: column; border-top: none; }
    .stat { border-right: none; border-bottom: 1px solid rgba(201,168,76,.12); }
    .stat:last-child { border-bottom: none; }
    .trust-sep { display: none; }

    .play-btn-outer { width: 70px; height: 70px; }
    .play-btn-inner { width: 50px; height: 50px; }
    .play-btn-inner svg { width: 22px; height: 22px; }
    .video-corner-tl, .video-corner-tr, .video-corner-bl, .video-corner-br { display: none; }
    .vmodal-close { top: -50px; right: 0; }

    .produtos-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
    .beneficios-grid { grid-template-columns: 1fr; }
    .footer-top { grid-template-columns: 1fr; gap: var(--sp-6); }
    .footer-bottom { flex-direction: column; gap: var(--sp-2); text-align: center; }
    .footer-motto { display: none; }

    .btn-xl { padding: 18px var(--sp-7); font-size: 1rem; width: 100%; justify-content: center; }
  }
  @media (max-width: 480px) {
    .produtos-grid { grid-template-columns: 1fr; }
    .hero-badge { font-size: .62rem; padding: 6px 12px; }
    .cf-badges { gap: 10px; }
    .cf-badges span { font-size: .7rem; }
    .vtrust-pill { padding: 10px 16px; }
    .video-headline { font-size: clamp(1.8rem, 8vw, 2.6rem); }
    .video-quote p { font-size: .92rem; }
  }
}

/* ═══════════════════════════════════════════════════════════
   v3.1 — SPLASH · PELÍCULAS · MENU (keyframes) · reduced-motion
   Cascade layers reabertas e mescladas.
   ═══════════════════════════════════════════════════════════ */

@layer components {

  /* ── Splash Screen ── */
  .splash {
    display: grid; place-items: center; background: var(--black);
    animation: splashOut .7s var(--ease-out) 2s forwards;
  }
  .splash--hide {
    animation: none; opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .5s var(--ease-out), visibility .5s;
  }
  .splash-glow {
    position: absolute; width: 520px; height: 520px; border-radius: 50%;
    background: radial-gradient(circle, rgba(201,168,76,.16) 0%, transparent 70%);
    filter: blur(40px); animation: splashGlow 2.2s ease-in-out infinite;
  }
  .splash-inner { position: relative; text-align: center; padding: var(--sp-5); }
  .splash-logo { display: flex; flex-direction: column; line-height: .9; margin-bottom: var(--sp-7); }
  .splash-lual {
    font-family: var(--font-display); font-weight: 700; font-size: clamp(3rem, 12vw, 5rem);
    background: var(--gold-grad);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    opacity: 0; transform: translateY(18px);
    animation: splashRise .7s var(--ease-expo) .15s forwards;
  }
  .splash-var {
    font-family: var(--font-ui); font-size: .8rem; font-weight: 600;
    letter-spacing: .42em; text-transform: uppercase; color: var(--gray-3); padding-left: .42em;
    opacity: 0; transform: translateY(14px);
    animation: splashRise .7s var(--ease-expo) .32s forwards;
  }
  .splash-bar {
    width: 180px; height: 2px; margin: 0 auto var(--sp-5);
    background: rgba(201,168,76,.15); border-radius: 2px; overflow: hidden;
  }
  .splash-bar-fill {
    display: block; height: 100%; width: 100%;
    background: var(--gold-grad); transform-origin: left; transform: scaleX(0);
    animation: splashFill 1.7s var(--ease-out) .35s forwards;
  }
  .splash-tagline {
    font-family: var(--font-ui); font-size: .72rem; letter-spacing: .2em;
    text-transform: uppercase; color: var(--gray-4);
    opacity: 0; animation: splashFadeIn .6s ease .95s forwards;
  }

  /* ── Nav: overlay desativado neste design; head só aparece no mobile ── */
  .nav-overlay { display: none; }
  .nav-menu-head { display: none; }

  /* ── Seção Películas ── */
  .peliculas { position: relative; padding: var(--section-py) 0; background: var(--black-2); overflow: hidden; }
  .peliculas-glow {
    position: absolute; top: -160px; right: -160px; width: 520px; height: 520px; border-radius: 50%;
    background: radial-gradient(circle, rgba(201,168,76,.10) 0%, transparent 70%);
    filter: blur(120px); pointer-events: none;
  }
  .peliculas .container { position: relative; z-index: 1; }
  .peliculas-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
  .peliculas-grid .film-card:nth-child(1) { --delay: 0s; }
  .peliculas-grid .film-card:nth-child(2) { --delay: .08s; }
  .peliculas-grid .film-card:nth-child(3) { --delay: .16s; }
  .peliculas-grid .film-card:nth-child(4) { --delay: .24s; }

  .film-card {
    display: flex; flex-direction: column; overflow: hidden;
    background: var(--black-3); border: 1px solid var(--gray-4); border-radius: var(--r-md);
    transition: border-color var(--t-base), box-shadow var(--t-base), transform var(--t-base);
  }
  .film-card:hover { border-color: var(--gold); box-shadow: var(--shadow-gold); transform: translateY(-6px); }

  .film-visual {
    position: relative; min-height: 300px; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    background: radial-gradient(circle at 50% 38%, #14161a, #0a0b0d);
    border-bottom: 1px solid var(--gray-4);
  }
  .film-tag-float {
    position: absolute; top: 16px; left: 16px; z-index: 5;
    font-family: var(--font-ui); font-size: .64rem; font-weight: 700;
    letter-spacing: .14em; text-transform: uppercase; color: var(--gold);
    background: rgba(0,0,0,.5); backdrop-filter: blur(8px);
    border: 1px solid rgba(201,168,76,.3); padding: 5px 12px; border-radius: var(--r-full);
  }

  .phone {
    position: relative; width: 132px; height: 268px; border-radius: 26px; padding: 9px;
    background: linear-gradient(155deg, #303034, #0e0e10);
    box-shadow: 0 20px 44px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.06);
  }
  .phone-notch {
    position: absolute; top: 9px; left: 50%; transform: translateX(-50%);
    width: 42px; height: 7px; border-radius: 0 0 8px 8px; background: #000; z-index: 4;
  }
  .phone-screen {
    position: relative; width: 100%; height: 100%; overflow: hidden;
    border-radius: 18px; padding: 22px 14px 14px;
    display: flex; flex-direction: column; gap: 7px;
    background: radial-gradient(circle at 50% 30%, #1b3358, #0a1120);
  }
  .ps-row { height: 6px; border-radius: 3px; background: rgba(255,255,255,.22); }
  .ps-row.short { width: 58%; }
  .ps-block { height: 56px; border-radius: 8px; background: rgba(201,168,76,.22); margin: 4px 0; }

  .privacy-eye, .matte-drop, .clear-spark, .ceramic-shield {
    position: absolute; bottom: 16px; right: 16px; z-index: 6;
    width: 38px; height: 38px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,.55); backdrop-filter: blur(8px);
    border: 1px solid rgba(201,168,76,.35); color: var(--gold);
  }

  /* 1. Privacidade */
  .film-visual--privacy .privacy-shade { position: absolute; top: 0; bottom: 0; width: 40%; z-index: 3; pointer-events: none; }
  .privacy-shade.left  { left: 0;  background: linear-gradient(90deg, rgba(0,0,0,.94), transparent); }
  .privacy-shade.right { right: 0; background: linear-gradient(270deg, rgba(0,0,0,.94), transparent); }

  /* 2. Fosca */
  .film-visual--matte .phone-screen { background: linear-gradient(160deg, #20232a, #0c0d0f); filter: saturate(.7) brightness(.92); }
  .film-visual--matte .ps-block { background: rgba(255,255,255,.10); }
  .matte-glare {
    position: absolute; inset: 0; z-index: 2; pointer-events: none;
    background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.05) 50%, transparent 65%);
  }

  /* 3. Transparente */
  .film-visual--clear .phone-screen { background: linear-gradient(150deg, #1a8cff 0%, #8b5cff 50%, #ff5ca8 100%); }
  .film-visual--clear .ps-row, .film-visual--clear .ps-block { background: rgba(255,255,255,.4); }
  .clear-shine {
    position: absolute; top: -40%; left: -30%; width: 55%; height: 180%; z-index: 2; pointer-events: none;
    transform: rotate(20deg); background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  }

  /* 4. Cerâmica 3D */
  .phone--curved { border-radius: 32px; }
  .phone--curved .phone-screen {
    border-radius: 24px;
    box-shadow: inset 0 0 0 2px rgba(201,168,76,.45),
                inset 7px 0 14px -7px rgba(201,168,76,.6),
                inset -7px 0 14px -7px rgba(201,168,76,.6);
  }
  .ceramic-edge { position: absolute; inset: 0; z-index: 2; border-radius: 24px; box-shadow: inset 0 0 18px rgba(201,168,76,.35); pointer-events: none; }
  .ceramic-impact { position: absolute; inset: -6px; z-index: 0; border-radius: 34px; box-shadow: 0 0 0 2px rgba(201,168,76,.18); pointer-events: none; }

  .film-body { padding: 22px; display: flex; flex-direction: column; flex: 1; }
  .film-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
  .film-icon { font-size: 1.5rem; line-height: 1; }
  .film-name { font-family: var(--font-display); font-size: 1.4rem; font-weight: 700; line-height: 1.15; }
  .film-desc { font-size: .9rem; color: var(--gray-2); line-height: 1.7; margin-bottom: var(--sp-4); }
  .film-benefits { display: flex; flex-direction: column; gap: 8px; margin-bottom: var(--sp-4); }
  .film-benefits li { position: relative; padding-left: 24px; font-size: .85rem; color: var(--gray-1); line-height: 1.5; }
  .film-benefits li::before {
    content: ""; position: absolute; left: 0; top: 3px; width: 15px; height: 15px;
    border-radius: 50%; background: rgba(37,211,102,.15);
  }
  .film-benefits li::after {
    content: ""; position: absolute; left: 4px; top: 7px; width: 6px; height: 3px;
    border-left: 2px solid var(--wpp); border-bottom: 2px solid var(--wpp); transform: rotate(-45deg);
  }
  .film-diff { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: .82rem; color: var(--gray-2); margin-bottom: var(--sp-5); }
  .film-diff-tag {
    font-family: var(--font-ui); font-size: .6rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    color: var(--gold); border: 1px solid rgba(201,168,76,.35); padding: 3px 8px; border-radius: var(--r-full);
  }

  .peliculas-cta { text-align: center; margin-top: var(--sp-9); display: flex; flex-direction: column; align-items: center; gap: var(--sp-4); }
  .peliculas-cta p { color: var(--gray-3); font-size: .95rem; max-width: 460px; }
}

@layer animations {
  @keyframes splashOut    { to { opacity: 0; visibility: hidden; pointer-events: none; } }
  @keyframes splashRise   { to { opacity: 1; transform: none; } }
  @keyframes splashFill   { to { transform: scaleX(1); } }
  @keyframes splashFadeIn { to { opacity: 1; } }
  @keyframes splashGlow   { 0%, 100% { opacity: .6; transform: scale(1); } 50% { opacity: 1; transform: scale(1.08); } }

  @media (prefers-reduced-motion: reduce) {
    .splash { animation: none; opacity: 0; visibility: hidden; pointer-events: none; }
    .splash-lual, .splash-var, .splash-bar-fill, .splash-tagline, .splash-glow { animation: none; opacity: 1; transform: none; }
    .nav-links { transition: none; }
    .nav-links li { opacity: 1; transform: none; filter: none; transition: none; }
    .nav-links::after { display: none; }
  }
}

@layer responsive {
  @media (max-width: 768px) {
    .peliculas-grid { grid-template-columns: 1fr; gap: 18px; }
  }
}

/* ═══════════════════════════════════════════════════════════
   v3.2 — AMBIENTE PREMIUM + GLASSMORPHISM
   Regra de ouro: só transform/opacity (zero paint animado).
   Presente e adaptado em todas as telas · reduced-motion neutraliza.
   ═══════════════════════════════════════════════════════════ */

@layer components {

  /* ── Dynamic Gradient — aurora dourada à deriva (hero) ── */
  .hero-aurora {
    position: absolute; inset: -25%;
    background:
      radial-gradient(40% 50% at 25% 35%, rgba(201,168,76,.10), transparent 70%),
      radial-gradient(35% 45% at 75% 65%, rgba(232,201,122,.08), transparent 70%),
      radial-gradient(45% 40% at 60% 25%, rgba(201,168,76,.06), transparent 70%);
    filter: blur(20px);
    animation: auroraDrift 38s ease-in-out infinite;
  }

  /* ── Blob Animation — formas orgânicas (transform-only, silhueta morfa ao girar) ── */
  .blob {
    position: absolute; pointer-events: none;
    border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%;
    filter: blur(55px);
  }
  .blob--gold {
    background: radial-gradient(circle at 42% 40%, rgba(201,168,76,.42), rgba(201,168,76,.08) 58%, transparent 74%);
  }
  .hero-blob { width: 460px; height: 460px; top: 8%; left: 56%; opacity: .5; animation: blobDrift1 30s ease-in-out infinite; }
  .peliculas-blob { width: 420px; height: 420px; bottom: -120px; left: -100px; opacity: .4; animation: blobDrift2 34s ease-in-out infinite; }

  /* ── Ambient Motion — glows existentes ganham deriva/respiração ── */
  .hero-glow-left  { animation: blobDrift2 36s ease-in-out infinite; }
  .hero-glow-right { animation: blobDrift1 32s ease-in-out infinite; }
  .vsec-glow-left  { animation: glowBreathe 15s ease-in-out infinite; }
  .vsec-glow-right { animation: glowBreathe 19s ease-in-out infinite reverse; }
  .peliculas-glow  { animation: glowBreathe 17s ease-in-out infinite; }

  /* gradientes radiais de CTA respirando lentamente */
  .cta-mid-bg, .cf-bg { inset: -10%; animation: gradientFloat 30s ease-in-out infinite; }

  /* ── Floating Elements — partículas/ícones flutuando ── */
  .floaters { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; }
  .floater {
    position: absolute; left: var(--x); top: var(--y);
    width: var(--s); height: var(--s); border-radius: 50%; opacity: 0;
    background: radial-gradient(circle, rgba(232,201,122,.95), rgba(201,168,76,.25) 55%, transparent 72%);
    animation: floatUp var(--dur, 16s) ease-in-out var(--d, 0s) infinite;
  }
  .floater--ring { background: none; border: 1px solid rgba(201,168,76,.5); }
  .floater--spark { background: none; color: rgba(232,201,122,.9); display: flex; align-items: center; justify-content: center; }
  .floater--spark svg { width: 100%; height: 100%; }

  /* ── Glassmorphism — superfícies de vidro + microinteração ── */
  .navbar.scrolled { backdrop-filter: blur(16px) saturate(1.3); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 1px 0 rgba(201,168,76,.25); }

  .hero-badge {
    backdrop-filter: blur(10px) saturate(1.3);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
  }

  .hero-stats {
    background: rgba(255,255,255,.022);
    backdrop-filter: blur(12px) saturate(1.2);
    border-radius: var(--r-md) var(--r-md) 0 0;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
  }

  .cf-badges span {
    backdrop-filter: blur(8px) saturate(1.2);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
  }

  /* sheen sweep nas pílulas de vidro do vídeo */
  .vtrust-pill { position: relative; overflow: hidden; box-shadow: inset 0 1px 0 rgba(255,255,255,.07); }
  .vtrust-pill::after {
    content: ""; position: absolute; top: 0; left: -150%; width: 55%; height: 100%; pointer-events: none;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.16), transparent);
    transform: skewX(-18deg); transition: left .6s var(--ease-out);
  }
  .vtrust-pill:hover::after { left: 150%; }
}

@layer animations {
  @keyframes auroraDrift {
    0%, 100% { transform: rotate(0deg) scale(1) translate(0, 0); }
    50%      { transform: rotate(8deg) scale(1.12) translate(2%, -2%); }
  }
  @keyframes blobDrift1 {
    0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); }
    33%      { transform: translate(-6%, 4%) rotate(120deg) scale(1.1); }
    66%      { transform: translate(5%, -5%) rotate(240deg) scale(.94); }
  }
  @keyframes blobDrift2 {
    0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); }
    40%      { transform: translate(7%, -4%) rotate(-140deg) scale(1.08); }
    70%      { transform: translate(-5%, 6%) rotate(-250deg) scale(.96); }
  }
  @keyframes glowBreathe {
    0%, 100% { opacity: .2; transform: scale(1); }
    50%      { opacity: .32; transform: scale(1.12); }
  }
  @keyframes gradientFloat {
    0%, 100% { transform: scale(1) translate(0, 0); }
    50%      { transform: scale(1.12) translate(-2%, 2%); }
  }
  @keyframes floatUp {
    0%   { transform: translateY(18px) translateX(0) scale(.85) rotate(0deg); opacity: 0; }
    15%  { opacity: var(--o, .5); }
    50%  { transform: translateY(-26px) translateX(var(--drift, 8px)) scale(1) rotate(40deg); }
    85%  { opacity: var(--o, .5); }
    100% { transform: translateY(-70px) translateX(0) scale(.85) rotate(80deg); opacity: 0; }
  }

  @media (prefers-reduced-motion: reduce) {
    .hero-aurora, .blob, .floater,
    .hero-glow-left, .hero-glow-right, .vsec-glow-left, .vsec-glow-right,
    .peliculas-glow, .cta-mid-bg, .cf-bg { animation: none !important; transform: none !important; }
    .floater { opacity: var(--o, .4); }
    .vtrust-pill::after { display: none; }
  }
}

@layer responsive {
  @media (max-width: 768px) {
    /* alivia o custo de blur no mobile mantendo o efeito presente */
    .peliculas-blob { display: none; }
    .hero-blob { filter: blur(45px); opacity: .42; }
    .hero-aurora { filter: blur(16px); }
  }
}

/* ═══════════════════════════════════════════════════════════
   v3.3 — RESPONSIVIDADE (mobile-first refinada)
   Tokens fluidos · touch targets · landscape · svh · tablet · ultrawide
   ═══════════════════════════════════════════════════════════ */

@layer responsive {

  /* ── Padding de container fluido (base mobile) ── */
  .container { padding-inline: clamp(1rem, 4vw, 1.5rem); }

  /* ── Hero: altura estável no mobile (sem "pulo" da barra do navegador) ── */
  @supports (min-height: 100svh) { .hero { min-height: 100svh; } }

  /* ── Landscape de celular: hero não estoura nem corta conteúdo ── */
  @media (orientation: landscape) and (max-height: 600px) {
    .hero { min-height: auto; padding-block: calc(var(--nav-h) + 1.5rem) 1.5rem; }
    .hero-scroll { display: none; }
    .hero-stats { margin-top: var(--sp-6); }
  }

  /* ── Alvos de toque ≥44px em telas touch (WCAG / boa UX mobile) ── */
  @media (hover: none) and (pointer: coarse) {
    .nav-toggle { min-width: 44px; min-height: 44px; align-items: center; justify-content: center; }
    .btn, .btn-card, .nav-cta, .nav-close, .play-btn { min-height: 44px; }
    .footer-links a { display: inline-block; padding-block: 4px; }
    .float-wpp-btn { width: 62px; height: 62px; }
  }

  /* ── Tablet: películas em 2 colunas (640–768) em vez de 1 ── */
  @media (min-width: 641px) and (max-width: 768px) {
    .peliculas-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  }

  /* ── Celulares pequenos (≤380px): aperta com elegância e ganha fps ── */
  @media (max-width: 380px) {
    .hero-actions .btn { font-size: .78rem; padding: 13px 18px; }
    .stat-num { font-size: 1.9rem; }
    .floaters .floater:nth-child(n+5) { display: none; }
    .film-name { font-size: 1.25rem; }
    .cf-badges { gap: 8px; }
    .vthumb-owner-icon { left: 12px; top: 12px; padding: 7px 12px 7px 8px; }
    .vthumb-owner-icon .owner-info strong { font-size: .76rem; }
    .vthumb-owner-icon .owner-info span { font-size: .68rem; }
  }

  /* ── Desktop grande (aditivo, mobile-first): mais respiro ── */
  @media (min-width: 1440px) {
    :root { --container: 1320px; }
    .produtos-grid { gap: 24px; }
    .peliculas-grid { gap: 26px; }
    .beneficios-grid { gap: 24px; }
  }

  /* ── Ultrawide: container amplo, leitura confortável, zero quebra ── */
  @media (min-width: 1920px) {
    :root { --container: 1480px; --section-py: clamp(6rem, 7vw, 9rem); }
  }
}

/* ═══════════════════════════════════════════════════════════
   v3.4 — FLUTUANTES GLOBAIS (body inteiro) + SPLASH PREMIUM 7s
   Tudo GPU (transform/opacity) · mobile-first · reduced-motion off
   ═══════════════════════════════════════════════════════════ */

@layer components {

  /* ── Camada global de elementos flutuantes (sobre todas as seções) ── */
  .ambient-field {
    position: fixed; inset: 0; z-index: 90;
    pointer-events: none; overflow: hidden; contain: strict;
  }
  .amb { position: absolute; }
  .orb {
    border-radius: 50%; filter: blur(9px); opacity: .42;
    background: radial-gradient(circle, rgba(232,201,122,.55), rgba(201,168,76,.12) 60%, transparent 72%);
  }
  .ring { border-radius: 50%; border: 1.5px solid rgba(201,168,76,.32); opacity: .32; }
  .spark { color: rgba(232,201,122,.5); opacity: .55; }
  .spark svg { display: block; }

  .amb-1 { top: 16%; left: 7%;  width: 92px;  height: 92px;  animation: ambA 20s ease-in-out infinite; }
  .amb-2 { top: 60%; left: 85%; width: 70px;  height: 70px;  animation: ambB 24s ease-in-out infinite; }
  .amb-3 { top: 82%; left: 16%; width: 120px; height: 120px; animation: ambC 28s ease-in-out infinite; }
  .amb-4 { top: 32%; left: 72%; width: 54px;  height: 54px;  animation: ambA 18s ease-in-out infinite reverse; }
  .amb-5 { top: 8%;  left: 52%; width: 44px;  height: 44px;  animation: ambB 22s ease-in-out infinite; }
  .amb-6 { top: 48%; left: 10%; width: 42px;  height: 42px;  animation: ambC 26s ease-in-out infinite; }
  .amb-7 { top: 22%; left: 88%; width: 66px;  height: 66px;  animation: ambA 30s ease-in-out infinite reverse; }
  .amb-8 { top: 70%; left: 60%; width: 22px;  height: 22px;  animation: ambB 16s ease-in-out infinite; }
  .amb-9 { top: 40%; left: 28%; width: 18px;  height: 18px;  animation: ambC 19s ease-in-out infinite; }

  /* ── Splash premium ── */
  .splash-ring {
    position: absolute; width: min(340px, 70vw); aspect-ratio: 1; border-radius: 50%;
    background: conic-gradient(from 0deg, transparent 0 68%, rgba(201,168,76,.55) 86%, transparent 100%);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
            mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
    opacity: .7; animation: splashRingSpin 6s linear infinite;
  }
  .splash-lual { letter-spacing: .05em; }
  .splash-flourish {
    display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 10px;
    font-family: var(--font-ui); font-size: .72rem; font-weight: 600;
    letter-spacing: .42em; text-transform: uppercase; color: var(--gray-3); padding-left: .42em;
  }
  .splash-flourish i { display: block; width: 30px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold)); }
  .splash-flourish i:last-child { background: linear-gradient(90deg, var(--gold), transparent); }
  .splash-progress { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 8px auto var(--sp-5); }
  .splash-bar { width: 200px; height: 3px; margin: 0; background: rgba(201,168,76,.15); border-radius: 3px; overflow: hidden; }
  .splash-bar-fill { display: block; height: 100%; width: 100%; transform-origin: left; transform: scaleX(0); background: var(--gold-grad); animation: none; }
  .splash-pct { font-family: var(--font-ui); font-size: .72rem; font-weight: 700; letter-spacing: .1em; color: var(--gold); }
}

@layer animations {
  @keyframes ambA {
    0%, 100% { transform: translate3d(0,0,0) rotate(0deg); }
    50%      { transform: translate3d(18px,-30px,0) rotate(45deg); }
  }
  @keyframes ambB {
    0%, 100% { transform: translate3d(0,0,0) rotate(0deg); }
    50%      { transform: translate3d(-24px,-18px,0) rotate(-55deg); }
  }
  @keyframes ambC {
    0%, 100% { transform: translate3d(0,0,0) scale(1); }
    33%      { transform: translate3d(16px,18px,0) scale(1.12); }
    66%      { transform: translate3d(-14px,10px,0) scale(.92); }
  }
  @keyframes splashRingSpin { to { transform: rotate(360deg); } }

  @media (prefers-reduced-motion: reduce) {
    .ambient-field { display: none; }
    .splash-ring { animation: none; }
  }
}

@layer responsive {
  /* mobile: mantém o efeito, alivia o custo (menos elementos, blur menor) */
  @media (max-width: 768px) {
    .amb-4, .amb-7 { display: none; }
    .orb { filter: blur(7px); opacity: .38; }
  }
  @media (max-width: 480px) {
    .amb-6, .amb-9 { display: none; }
  }
}

/* ═══════════════════════════════════════════════════════════
   v3.5 — VÍDEO INLINE · SOM · SOCIAIS · CARDS COMPACTOS · CREST
   ═══════════════════════════════════════════════════════════ */

@layer components {

  /* ── Logo crest no navbar (arte autossuficiente, sem halo retangular) ── */
  .logo-img { height: 58px; width: auto; filter: none; border-radius: 8px; }
  .logo-img:hover { filter: drop-shadow(0 0 10px var(--gold-glow)); }

  /* ── Splash: crest + anel/glow centralizados ── */
  .splash-crest { width: min(300px, 62vw); height: auto; display: block; }
  .splash-glow {
    top: 50%; left: 50%; transform: translate(-50%, -50%);
    animation: splashGlow 2.2s ease-in-out infinite;
  }
  .splash-ring {
    top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(0deg);
    animation: splashRingSpin 6s linear infinite;
  }

  /* ── Vídeo inline ── */
  .video-stage {
    position: relative; aspect-ratio: 16 / 9; border-radius: 28px; overflow: hidden;
    background: #0a0b0e; box-shadow: 0 0 40px rgba(212,175,55,.12);
  }
  .video-el { width: 100%; height: 100%; object-fit: cover; display: block; }
  .video-muted-tag {
    position: absolute; top: 14px; left: 14px; z-index: 3;
    font-family: var(--font-ui); font-size: .7rem; font-weight: 700; letter-spacing: .05em;
    color: #fff; background: rgba(0,0,0,.55); backdrop-filter: blur(8px);
    padding: 5px 11px; border-radius: var(--r-full); border: 1px solid rgba(255,255,255,.12);
  }
  .sound-btn {
    position: absolute; bottom: 16px; right: 16px; z-index: 4;
    display: inline-flex; align-items: center; gap: 9px;
    font-family: var(--font-ui); font-size: .82rem; font-weight: 700; letter-spacing: .04em;
    color: var(--black); background: var(--gold-grad);
    padding: 11px 18px; border-radius: var(--r-full);
    box-shadow: 0 6px 20px rgba(201,168,76,.45);
    transition: transform var(--t-fast), box-shadow var(--t-fast), background var(--t-base), color var(--t-base);
  }
  .sound-btn:not(.is-on) { animation: soundPulse 2.4s ease-in-out infinite; }
  .sound-btn:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 10px 30px rgba(201,168,76,.6); }
  .sound-btn__icon { display: inline-flex; }
  .sound-btn.is-on {
    background: rgba(0,0,0,.6); color: #fff; backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,.18); box-shadow: none; animation: none;
  }
  .sound-btn.is-on .mute-x1, .sound-btn.is-on .mute-x2 { display: none; }

  /* ── Ícones sociais (Instagram + WhatsApp) ── */
  .social-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: var(--sp-6); }
  .social-btn {
    position: relative; overflow: hidden;
    display: inline-flex; align-items: center; gap: 10px;
    font-family: var(--font-ui); font-size: .85rem; font-weight: 700; letter-spacing: .04em;
    color: var(--gray-1); padding: 12px 22px; border-radius: var(--r-full);
    border: 1px solid var(--gray-4); background: rgba(255,255,255,.03); backdrop-filter: blur(8px);
    transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base), color var(--t-base);
  }
  .social-btn svg { color: var(--gold); transition: transform var(--t-base), color var(--t-base); }
  .social-btn:hover { transform: translateY(-3px); color: #fff; }
  .social-btn:hover svg { transform: scale(1.12); }
  .social-btn--wpp:hover { border-color: var(--wpp); box-shadow: 0 8px 26px var(--wpp-glow); }
  .social-btn--wpp:hover svg { color: var(--wpp); }
  .social-btn--ig:hover { border-color: #d6249f; box-shadow: 0 8px 26px rgba(214,36,159,.35); }
  .social-btn--ig:hover svg { color: #e1306c; }
  .social-btn::after {
    content: ""; position: absolute; top: 0; left: -150%; width: 55%; height: 100%; pointer-events: none;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.2), transparent);
    transform: skewX(-18deg); transition: left .6s var(--ease-out);
  }
  .social-btn:hover::after { left: 150%; }

  .footer-ig-link {
    display: inline-flex; align-items: center; gap: 8px; margin-top: 12px;
    font-family: var(--font-ui); font-size: .9rem; font-weight: 700; color: var(--gray-2);
    transition: color var(--t-fast);
  }
  .footer-ig-link:hover { color: #e1306c; }

  /* ── Produtos: cards mais compactos e premium ── */
  .card-body { padding: 14px; }
  .card-name { font-size: 1.1rem; margin-bottom: 4px; }
  .card-desc {
    font-size: .78rem; line-height: 1.5; margin-bottom: 10px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .card-prices { margin-bottom: 6px; gap: 6px; }
  .price-curr { font-size: 1.1rem; }
  .card-stock { font-size: .68rem; margin-bottom: 10px; }
  .btn-card { padding: 10px 14px; font-size: .75rem; }
}

@layer animations {
  @keyframes soundPulse { 0%, 100% { transform: none; } 50% { transform: scale(1.04); } }
  /* re-define centralizado para o anel não perder o centro ao girar */
  @keyframes splashRingSpin { to { transform: translate(-50%, -50%) rotate(360deg); } }

  @media (prefers-reduced-motion: reduce) {
    .sound-btn:not(.is-on) { animation: none; }
    .social-btn::after { display: none; }
    .splash-ring { transform: translate(-50%, -50%); }
  }
}

@layer responsive {
  @media (max-width: 768px) {
    .social-btn { padding: 11px 18px; font-size: .8rem; }
    .sound-btn { bottom: 12px; right: 12px; padding: 10px 14px; font-size: .76rem; }
  }
  @media (max-width: 380px) {
    .sound-btn__txt { font-size: .72rem; }
    .social-row { gap: 10px; }
  }
}

/* ════════════════════════════════════════════════════════════
   UX CATÁLOGO — "Ver mais / Ver menos" + Lightbox com zoom
   ════════════════════════════════════════════════════════════ */
@layer components {

  /* foco visível no card de imagem (agora clicável) */
  .card-img-wrap:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }

  /* lupa discreta sobre a foto */
  .card-zoom-hint {
    position: absolute; bottom: 10px; right: 10px; z-index: 2;
    width: 34px; height: 34px; border-radius: var(--r-full);
    display: flex; align-items: center; justify-content: center;
    color: #fff; background: rgba(18,18,18,.5);
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
    opacity: 0; transform: translateY(6px);
    transition: opacity .3s var(--ease-out), transform .3s var(--ease-out);
    pointer-events: none;
  }
  .card-zoom-hint svg { width: 16px; height: 16px; }
  .produto-card:hover .card-zoom-hint { opacity: 1; transform: translateY(0); }
  @media (hover: none) { .card-zoom-hint { opacity: .85; transform: none; } }

  /* botão "Ver mais / Ver menos" — minimalista */
  .card-vermais {
    align-self: flex-start;
    display: inline-flex; align-items: center; gap: 4px;
    margin: 0 0 12px; padding: 2px 0;
    font-family: var(--font-ui); font-size: .72rem; font-weight: 600;
    letter-spacing: .02em; color: var(--gold);
    background: none; border: 0; cursor: pointer;
    opacity: .82; transition: opacity var(--t-fast);
  }
  .card-vermais:hover { opacity: 1; }
  .card-vermais:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 2px; }
  .card-vermais .vermais-chevron { width: 12px; height: 12px; transition: transform .3s var(--ease-out); }
  .card-vermais.is-open .vermais-chevron { transform: rotate(180deg); }

  /* ── LIGHTBOX ── */
  .lightbox {
    position: fixed; inset: 0; z-index: calc(var(--z-modal) + 100);
    display: flex; align-items: center; justify-content: center;
    background: rgba(8,8,8,.92);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    opacity: 0; visibility: hidden;
    transition: opacity .3s var(--ease-out), visibility .3s;
    touch-action: none; overscroll-behavior: contain;
  }
  .lightbox.is-open { opacity: 1; visibility: visible; }

  .lightbox-stage {
    position: relative; width: 92vw; height: 86vh;
    display: flex; align-items: center; justify-content: center; overflow: hidden;
  }
  .lightbox-img {
    max-width: 92vw; max-height: 86vh;
    object-fit: contain; background: #fff; border-radius: 10px;
    transform: translate(0, 0) scale(1);
    transition: transform .28s var(--ease-out); will-change: transform;
    cursor: zoom-in; user-select: none; -webkit-user-select: none; -webkit-user-drag: none;
    touch-action: none;
  }
  .lightbox-img.is-zoomed { cursor: grab; }
  .lightbox-img.is-zoomed:active { cursor: grabbing; }

  .lightbox-close {
    position: absolute; top: max(16px, env(safe-area-inset-top, 0px)); right: 16px; z-index: 2;
    width: 44px; height: 44px; border-radius: var(--r-full);
    display: flex; align-items: center; justify-content: center;
    color: #fff; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18);
    cursor: pointer; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
    transition: background var(--t-fast), transform var(--t-fast);
  }
  .lightbox-close:hover { background: rgba(255,255,255,.22); transform: rotate(90deg); }
  .lightbox-close:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

  .lightbox-hint {
    position: absolute; left: 50%; bottom: max(18px, env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%); margin: 0; padding: 0 14px; text-align: center;
    font-family: var(--font-ui); font-size: .72rem; letter-spacing: .02em;
    color: rgba(255, 255, 255, .55); pointer-events: none;
    transition: opacity var(--t-fast);
  }
  .lightbox.is-zoomed .lightbox-hint { opacity: 0; }

  body.lb-lock { overflow: hidden; }
}

@layer responsive {
  @media (max-width: 768px) {
    .lightbox-stage { width: 96vw; height: 84vh; }
    .lightbox-img { max-width: 96vw; max-height: 84vh; }
    .lightbox-hint { font-size: .68rem; }
  }
}

/* reduced-motion: unlayered p/ vencer todas as @layer */
@media (prefers-reduced-motion: reduce) {
  .card-desc, .lightbox, .lightbox-img, .card-zoom-hint, .card-vermais .vermais-chevron, .lightbox-close { transition-duration: .01ms; }
}