/* ===== BLOCO CSS 1 ===== */

    :root {
      --green-950: #052e1d;
      --green-900: #06472a;
      --green-800: #08623a;
      --green-700: #087a43;
      --green-600: #0b9851;
      --green-500: #17b968;
      --green-100: #dff7e9;
      --green-50: #f2fbf6;
      --yellow-500: #ffc72c;
      --yellow-400: #ffda62;
      --ink: #142219;
      --muted: #66756b;
      --white: #ffffff;
      --cream: #fbfaf4;
      --border: rgba(12, 79, 45, 0.13);
      --shadow-sm: 0 10px 30px rgba(4, 58, 31, 0.08);
      --shadow-lg: 0 28px 80px rgba(4, 58, 31, 0.18);
      --radius: 26px;
      --max: 1220px;
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; background: #031d12; }
    body {
      margin: 0;
      color: var(--ink);
      background: #031d12;
      font-family: "Manrope", Arial, sans-serif;
      overflow-x: hidden;
    }

    main { background: var(--white); }
    .footer { margin-bottom: -1px; }
    img { max-width: 100%; display: block; }
    a { color: inherit; text-decoration: none; }
    button, input, textarea { font: inherit; }
    button { cursor: pointer; }
    :focus-visible { outline: 3px solid var(--yellow-500); outline-offset: 3px; }

    .container { width: min(calc(100% - 40px), var(--max)); margin-inline: auto; }
    .section { padding: 96px 0; }
    .section-sm { padding: 54px 0; }
    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: var(--green-700);
      font-weight: 800;
      font-size: 0.78rem;
      text-transform: uppercase;
      letter-spacing: 0.14em;
    }
    .eyebrow-light { color: var(--yellow-400); }
    .title {
      margin: 14px 0 0;
      max-width: 780px;
      font-family: "Montserrat", sans-serif;
      font-size: clamp(2rem, 4.2vw, 4rem);
      line-height: 1.05;
      letter-spacing: -0.045em;
    }
    .lead {
      max-width: 700px;
      margin: 18px 0 0;
      color: var(--muted);
      font-size: clamp(1rem, 1.5vw, 1.18rem);
      line-height: 1.75;
    }
    .center { text-align: center; }
    .center .title, .center .lead { margin-inline: auto; }

    .btn {
      min-height: 50px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      border: 0;
      border-radius: 999px;
      padding: 0 24px;
      font-weight: 800;
      transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
    }
    .btn:hover { transform: translateY(-2px); }
    .btn-primary { background: var(--green-600); color: white; box-shadow: 0 12px 30px rgba(11, 152, 81, .28); }
    .btn-yellow { background: var(--yellow-500); color: #1c2a20; box-shadow: 0 12px 30px rgba(255, 199, 44, .24); }
    .btn-outline { background: transparent; color: white; border: 1.5px solid rgba(255,255,255,.55); }
    .btn-soft { background: var(--green-100); color: var(--green-900); }

    /* Header */
    .header {
      position: fixed;
      inset: 0 0 auto;
      z-index: 1000;
      transition: .3s ease;
    }
    .header.scrolled {
      background: rgba(255,255,255,.94);
      backdrop-filter: blur(18px);
      box-shadow: 0 8px 26px rgba(0,0,0,.07);
      border-bottom: 1px solid var(--border);
    }
    .nav {
      height: 82px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
    }
    .brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
    .brand-image {
      width: 142px;
      height: 54px;
      object-fit: contain;
      background: rgba(255,255,255,.96);
      padding: 4px 10px;
      border-radius: 16px;
      box-shadow: 0 7px 18px rgba(0,0,0,.1);
    }
    .brand-fallback { display: none; font-family: "Montserrat", sans-serif; font-weight: 900; color: var(--green-700); }
    .menu { display: flex; align-items: center; gap: 24px; }
    .menu a:not(.btn) { color: rgba(255,255,255,.9); font-size: .92rem; font-weight: 700; }
    .header.scrolled .menu a:not(.btn) { color: var(--ink); }
    .menu a:not(.btn):hover { color: var(--yellow-500); }
    .menu-toggle {
      width: 46px; height: 46px; border: 1px solid rgba(255,255,255,.4); border-radius: 14px;
      display: none; place-items: center; color: white; background: rgba(255,255,255,.08); font-size: 1.35rem;
    }
    .header.scrolled .menu-toggle { color: var(--green-900); border-color: var(--border); background: white; }

    /* Hero */
    .hero {
      position: relative;
      min-height: 790px;
      display: grid;
      align-items: center;
      color: white;
      isolation: isolate;
      overflow: hidden;
      background: var(--green-950);
    }
    .hero::before {
      content: "";
      position: absolute; inset: 0; z-index: -3;
      background-image:
        linear-gradient(90deg, rgba(5,46,29,.88) 0%, rgba(5,46,29,.78) 38%, rgba(5,46,29,.22) 68%, rgba(5,46,29,.18) 100%),
        url("../images/hero-super-mana.webp");
      background-position: center;
      background-size: cover;
    }
    .hero::after {
      content: ""; position: absolute; inset: 0; z-index: -2;
      background:
        radial-gradient(circle at 16% 28%, rgba(23,185,104,.26), transparent 36%),
        linear-gradient(180deg, rgba(0,0,0,.03), rgba(3,26,16,.45));
    }
    .hero-grid {
      padding-top: 120px;
      padding-bottom: 66px;
      display: grid;
      grid-template-columns: 1.08fr .92fr;
      align-items: center;
      gap: 54px;
    }
    .hero-kicker {
      display: inline-flex; align-items: center; gap: 9px;
      border: 1px solid rgba(255,255,255,.25);
      background: rgba(255,255,255,.09);
      border-radius: 999px; padding: 8px 14px;
      text-transform: uppercase; letter-spacing: .13em; font-size: .76rem; font-weight: 800;
      backdrop-filter: blur(12px);
    }
    .hero h1 {
      margin: 22px 0 0;
      font-family: "Montserrat", sans-serif;
      font-size: clamp(3rem, 6vw, 5.8rem);
      line-height: .98;
      letter-spacing: -.055em;
      max-width: 750px;
    }
    .hero h1 span { color: var(--yellow-500); }
    .hero p { max-width: 650px; margin: 24px 0 0; color: rgba(255,255,255,.85); line-height: 1.7; font-size: 1.08rem; }
    .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
    .hero-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 34px; }
    .hero-tag { display: flex; align-items: center; gap: 8px; padding: 10px 13px; border-radius: 999px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.08); font-size: .82rem; font-weight: 700; backdrop-filter: blur(8px); }
    .hero-tag i { color: var(--yellow-500); }
    .hero-card {
      background: rgba(255,255,255,.1);
      border: 1px solid rgba(255,255,255,.18);
      border-radius: 34px;
      padding: 10px;
      backdrop-filter: blur(13px);
      box-shadow: var(--shadow-lg);
    }
    .hero-card img { width: 100%; max-height: 460px; object-fit: contain; border-radius: 26px; background: var(--green-900); }
    .hero-hours { margin-top: 14px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 15px 18px; border-radius: 18px; background: rgba(0,0,0,.24); border: 1px solid rgba(255,255,255,.14); }
    .hero-hours strong { color: var(--yellow-500); font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; }
    .hero-hours span { color: rgba(255,255,255,.83); font-size: .86rem; text-align: right; }

    /* Marquee */
    .marquee { border-bottom: 1px solid var(--border); background: white; overflow: hidden; }
    .marquee-track { width: max-content; display: flex; animation: marquee 32s linear infinite; }
    .marquee-item { min-height: 62px; display: flex; align-items: center; gap: 10px; padding: 0 30px; color: var(--green-900); font-weight: 800; white-space: nowrap; text-transform: uppercase; font-size: .78rem; letter-spacing: .08em; }
    .marquee-item i { color: var(--green-600); font-size: 1rem; }
    .marquee-item::after { content: ""; width: 7px; height: 7px; background: var(--yellow-500); border-radius: 50%; margin-left: 22px; }
    @keyframes marquee { to { transform: translateX(-50%); } }

    /* Cards */
    .sector-grid { margin-top: 48px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
    .sector-card { overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius); background: white; box-shadow: var(--shadow-sm); transition: transform .25s ease, box-shadow .25s ease; display:flex; flex-direction:column; height:100%; }
    .sector-card:hover { transform: translateY(-7px); box-shadow: 0 24px 55px rgba(4,58,31,.14); }
    .sector-image { position: relative; aspect-ratio: 4/3; overflow: hidden; }
    .sector-image img { width: 100%; height: 100%; object-fit: cover; object-position: center center; display:block; transition: transform .6s ease; }
    .sector-card:hover img { transform: scale(1.06); }
    .sector-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, rgba(4,30,18,.82)); }
    .sector-name { position: absolute; left: 16px; right: 16px; bottom: 16px; z-index: 1; display: flex; align-items: center; gap: 10px; color: white; font-family: "Montserrat", sans-serif; font-weight: 800; }
    .sector-name i { width: 40px; height: 40px; display: grid; place-items: center; flex: 0 0 40px; border-radius: 13px; background: var(--green-600); }
    .sector-body { padding: 20px; color: var(--muted); line-height: 1.65; font-size: .93rem; flex:1; min-height: 132px; display:flex; align-items:center; justify-content:center; text-align:center; }

    /* Experience */
    .dark { background: var(--green-950); color: white; position: relative; overflow: hidden; }
    .dark::before { content: ""; position: absolute; width: 440px; height: 440px; border-radius: 50%; background: rgba(23,185,104,.12); filter: blur(18px); right: -120px; top: -160px; }
    .experience-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 62px; align-items: center; position: relative; }
    .feature-grid { margin-top: 32px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
    .feature { border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.055); padding: 20px; border-radius: 20px; }
    .feature i { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; background: var(--green-600); color: white; font-size: 1.15rem; }
    .feature h3 { margin: 16px 0 5px; font-size: 1rem; }
    .feature p { margin: 0; color: rgba(255,255,255,.65); line-height: 1.55; font-size: .87rem; }
    .experience-image { position: relative; }
    .experience-image img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 32px; box-shadow: var(--shadow-lg); }
    .quality-badge { position: absolute; left: -22px; bottom: -24px; background: var(--yellow-500); color: var(--ink); padding: 22px; border-radius: 20px; box-shadow: var(--shadow-lg); }
    .quality-badge strong { display: block; font-family: "Montserrat", sans-serif; font-size: 1.45rem; }
    .quality-badge span { font-size: .72rem; text-transform: uppercase; font-weight: 800; letter-spacing: .08em; }

    /* Promo */
    .promo { padding: 90px 0; background: var(--cream); }
    .promo-box { overflow: hidden; display: grid; grid-template-columns: 1.08fr .92fr; align-items: center; gap: 40px; padding: 56px; color: white; border-radius: 36px; background: linear-gradient(130deg, var(--green-900), var(--green-600)); box-shadow: var(--shadow-lg); }
    .promo-box .lead { color: rgba(255,255,255,.78); }
    .checks { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 22px; margin-top: 26px; }
    .check { display: flex; align-items: flex-start; gap: 9px; font-size: .9rem; font-weight: 700; }
    .check i { color: var(--yellow-500); }
    .promo-image { position: relative; }
    .promo-image img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 28px; }
    .promo-sticker { position: absolute; top: -16px; right: -16px; width: 108px; height: 108px; display: grid; place-items: center; text-align: center; border-radius: 50%; background: var(--yellow-500); color: var(--ink); font-family: "Montserrat", sans-serif; font-weight: 900; transform: rotate(8deg); box-shadow: var(--shadow-sm); }

    /* Delivery/App */
    .split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
    .split-image img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 32px; box-shadow: var(--shadow-lg); }
    .mini-checks { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 28px 0; }
    .mini-check { display: flex; gap: 9px; align-items: flex-start; color: var(--ink); font-size: .91rem; font-weight: 700; }
    .mini-check i { color: var(--green-600); }
    .app-section { background: var(--green-50); }
    .app-card { position: relative; display: grid; place-items: center; min-height: 470px; padding: 18px; border-radius: 36px; background: radial-gradient(circle at 50% 32%, #fff6bd, var(--yellow-500)); overflow: hidden; }
    .app-card::after { content: ""; position: absolute; width: 260px; height: 260px; border: 28px solid rgba(255,255,255,.16); border-radius: 50%; }
    .app-card img { position: relative; z-index: 2; display: block; width: 100%; height: 100%; max-height: none; object-fit: cover; object-position: center 18%; border-radius: 28px; box-shadow: 0 22px 34px rgba(0,0,0,.18); }
    .store-buttons { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
    .store-btn { display: flex; align-items: center; gap: 12px; min-width: 178px; padding: 11px 17px; color: white; background: #111; border-radius: 16px; }
    .store-btn i { font-size: 1.6rem; }
    .store-btn small { display: block; opacity: .68; font-size: .63rem; text-transform: uppercase; }
    .store-btn strong { display: block; font-size: .95rem; }

    /* Location */
    .locations-grid { margin-top: 46px; display: grid; gap: 30px; }
    .location-card { margin-top: 46px; display: grid; grid-template-columns: 1.1fr .9fr; overflow: hidden; border: 1px solid var(--border); border-radius: 32px; box-shadow: var(--shadow-sm); }
    .locations-grid .location-card { margin-top: 0; }
    .map { min-height: 440px; background: #e8eee9; }
    .map iframe { width: 100%; height: 100%; min-height: 440px; border: 0; }
    .location-info { padding: 46px; background: white; }
    .location-info h3 { margin: 0; font-family: "Montserrat", sans-serif; font-size: 1.8rem; }
    .info-line { display: flex; gap: 13px; margin-top: 20px; color: var(--muted); line-height: 1.55; }
    .info-line i { color: var(--green-600); font-size: 1.12rem; margin-top: 2px; }

    /* Gallery */
    .gallery-grid { margin-top: 46px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
    .gallery-item { position: relative; overflow: hidden; aspect-ratio: 4 / 5; border-radius: 24px; background: var(--green-950); }
    .gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s ease; }
    .gallery-item:hover img { transform: scale(1.06); }
    .gallery-item span { position: absolute; left: 14px; right: 14px; bottom: 14px; padding: 11px 13px; color: white; border-radius: 14px; background: rgba(5,46,29,.75); backdrop-filter: blur(10px); font-size: .82rem; font-weight: 700; }


    /* Fotos reais Super Maná — otimizadas e sem cortes */
    img.mana-photo {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      image-rendering: auto;
    }

    /* FAQ */
    .faq-grid { display: grid; grid-template-columns: .82fr 1.18fr; gap: 70px; align-items: start; }
    .accordion { border-top: 1px solid var(--border); }
    .faq-item { border-bottom: 1px solid var(--border); }
    .faq-question { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 15px; text-align: left; color: var(--ink); background: transparent; border: 0; padding: 23px 0; font-weight: 800; }
    .faq-question i { transition: transform .25s ease; }
    .faq-answer { max-height: 0; overflow: hidden; color: var(--muted); line-height: 1.65; transition: max-height .3s ease; }
    .faq-answer p { margin: 0 0 22px; }
    .faq-item.open .faq-answer { max-height: 220px; }
    .faq-item.open .faq-question i { transform: rotate(45deg); }

    /* Contact */
    .contact { background: var(--green-950); color: white; }
    .contact-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 64px; }
    .contact-list { display: grid; gap: 17px; margin-top: 30px; }
    .contact-line { display: flex; align-items: flex-start; gap: 12px; color: rgba(255,255,255,.77); }
    .contact-line i { color: var(--yellow-500); font-size: 1.08rem; }
    .form { border: 1px solid rgba(255,255,255,.11); background: rgba(255,255,255,.055); border-radius: 28px; padding: 30px; }
    .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
    .field { display: grid; gap: 8px; }
    .field.full { grid-column: 1 / -1; }
    .field label { color: rgba(255,255,255,.7); font-size: .72rem; text-transform: uppercase; font-weight: 800; letter-spacing: .1em; }
    .field input, .field textarea, .field select { width: 100%; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.08); color: white; border-radius: 15px; padding: 14px 15px; outline: 0; }
    .field select { cursor: pointer; }
    .field select option { color: var(--ink); background: white; }
    .field input::placeholder, .field textarea::placeholder { color: rgba(255,255,255,.42); }
    .field textarea { resize: vertical; min-height: 130px; }

    /* Footer */
    .footer { background: #031d12; color: rgba(255,255,255,.66); }
    .footer-grid { display: grid; grid-template-columns: 1.35fr .8fr 1fr 1fr; gap: 42px; padding: 56px 0; }
    .footer-logo { width: 145px; background: white; padding: 5px 10px; border-radius: 16px; }
    .footer h3 { margin: 0 0 18px; color: white; font-size: 1rem; }
    .footer p, .footer li { font-size: .88rem; line-height: 1.65; }
    .footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
    .socials { display: flex; gap: 10px; margin-top: 20px; }
    .socials a { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.14); border-radius: 50%; color: white; }
    .copyright { padding: 22px 0; border-top: 1px solid rgba(255,255,255,.1); display: flex; justify-content: space-between; gap: 20px; font-size: .78rem; }

    .whatsapp-float {
      position: fixed; z-index: 1000; right: 22px; bottom: 22px; width: 60px; height: 60px; display: grid; place-items: center;
      color: white; background: #20b95a; border-radius: 50%; box-shadow: 0 16px 35px rgba(32,185,90,.4); font-size: 1.7rem;
      animation: pulse 2.4s infinite;
    }
    @keyframes pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(32,185,90,.36), 0 16px 35px rgba(32,185,90,.4); } 55% { box-shadow: 0 0 0 14px rgba(32,185,90,0), 0 16px 35px rgba(32,185,90,.4); } }

    /* Efeito especial de materialização / teletransporte ao rolar */
    .reveal {
      --teleport-x: 0px;
      --teleport-scale: .88;
      --teleport-delay: 0ms;
      position: relative;
      isolation: isolate;
      opacity: 0;
      transform: translate3d(var(--teleport-x), 46px, 0) scale(var(--teleport-scale));
      filter: blur(16px) brightness(1.7) saturate(1.35);
      clip-path: inset(44% 0 44% 0 round 22px);
      transition:
        opacity .72s cubic-bezier(.2,.8,.2,1),
        transform .95s cubic-bezier(.16,1,.3,1),
        filter .9s ease,
        clip-path .88s cubic-bezier(.16,1,.3,1);
      transition-delay: var(--teleport-delay);
      will-change: opacity, transform, filter, clip-path;
    }
    .reveal[data-teleport="left"] { --teleport-x: -54px; }
    .reveal[data-teleport="right"] { --teleport-x: 54px; }
    .reveal[data-teleport="zoom"] { --teleport-scale: .72; }
    .reveal.visible {
      opacity: 1;
      transform: translate3d(0, 0, 0) scale(1);
      filter: blur(0) brightness(1) saturate(1);
      clip-path: inset(0 0 0 0 round 0);
    }
    .reveal::before,
    .reveal::after {
      content: "";
      position: absolute;
      pointer-events: none;
      z-index: 8;
      opacity: 0;
    }
    .reveal::before {
      left: 50%;
      top: -16%;
      width: 4px;
      height: 132%;
      transform: translateX(-50%) scaleY(.03);
      transform-origin: center;
      background: linear-gradient(180deg, transparent, rgba(255,218,98,.95) 20%, #9dffd0 48%, rgba(23,185,104,.95) 72%, transparent);
      box-shadow:
        0 0 10px rgba(255,218,98,.9),
        0 0 28px rgba(23,185,104,.92),
        0 0 58px rgba(23,185,104,.62);
      mix-blend-mode: screen;
    }
    .reveal::after {
      inset: -12%;
      border-radius: inherit;
      transform: scale(.62) rotate(-4deg);
      background:
        radial-gradient(circle at 16% 28%, rgba(255,218,98,.95) 0 2px, transparent 3px),
        radial-gradient(circle at 32% 76%, rgba(157,255,208,.9) 0 2px, transparent 3px),
        radial-gradient(circle at 58% 18%, rgba(23,185,104,.9) 0 2px, transparent 3px),
        radial-gradient(circle at 78% 64%, rgba(255,218,98,.85) 0 2px, transparent 3px),
        radial-gradient(circle at 90% 34%, rgba(157,255,208,.9) 0 1.5px, transparent 3px),
        radial-gradient(ellipse at center, rgba(23,185,104,.24), transparent 62%);
      filter: blur(.2px);
      mix-blend-mode: screen;
    }
    .reveal.visible::before {
      animation: teleport-beam .9s cubic-bezier(.2,.8,.2,1) var(--teleport-delay) both;
    }
    .reveal.visible::after {
      animation: teleport-particles 1.05s ease-out var(--teleport-delay) both;
    }
    .reveal.teleport-done::before,
    .reveal.teleport-done::after { display: none; }

    @keyframes teleport-beam {
      0% { opacity: 0; transform: translateX(-50%) scaleY(.02); }
      18% { opacity: 1; }
      58% { opacity: .95; transform: translateX(-50%) scaleY(1); }
      100% { opacity: 0; transform: translateX(-50%) scaleY(1.12); }
    }
    @keyframes teleport-particles {
      0% { opacity: 0; transform: scale(.52) rotate(-6deg); }
      32% { opacity: .92; }
      100% { opacity: 0; transform: scale(1.18) rotate(8deg); }
    }



    /* =========================================================
       Camada premium de transições e efeitos visuais
       ========================================================= */
    body {
      --scroll-progress: 0%;
      --pointer-x: 50%;
      --pointer-y: 30%;
    }
    body::before {
      content: "";
      position: fixed;
      inset: 0;
      z-index: -20;
      pointer-events: none;
      background:
        radial-gradient(circle at var(--pointer-x) var(--pointer-y), rgba(23,185,104,.08), transparent 23rem),
        linear-gradient(180deg, rgba(255,255,255,0), rgba(223,247,233,.18));
      transition: background-position .25s ease;
    }
    #scrollProgress {
      position: fixed;
      inset: 0 auto auto 0;
      z-index: 3000;
      width: var(--scroll-progress);
      height: 4px;
      pointer-events: none;
      background: linear-gradient(90deg, var(--green-500), var(--yellow-500), #9dffd0);
      box-shadow: 0 0 14px rgba(23,185,104,.85), 0 0 26px rgba(255,199,44,.55);
      transition: width .08s linear;
    }
    .page-transition {
      position: fixed;
      inset: 0;
      z-index: 5000;
      display: grid;
      place-items: center;
      background:
        radial-gradient(circle at center, rgba(23,185,104,.22), transparent 34%),
        var(--green-950);
      opacity: 1;
      visibility: visible;
      transition: opacity .8s ease, visibility .8s ease;
    }
    .page-transition.is-hidden { opacity: 0; visibility: hidden; }
    .portal-loader {
      position: relative;
      width: 112px;
      height: 112px;
      display: grid;
      place-items: center;
    }
    .portal-loader::before,
    .portal-loader::after {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: 50%;
      border: 2px solid transparent;
    }
    .portal-loader::before {
      border-top-color: var(--yellow-500);
      border-right-color: var(--green-500);
      box-shadow: 0 0 28px rgba(23,185,104,.5);
      animation: portal-spin 1.1s linear infinite;
    }
    .portal-loader::after {
      inset: 16px;
      border-bottom-color: #9dffd0;
      border-left-color: var(--yellow-400);
      animation: portal-spin-reverse .82s linear infinite;
    }
    .portal-loader i {
      width: 48px;
      height: 48px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      color: var(--green-950);
      background: var(--yellow-500);
      font-size: 1.4rem;
      box-shadow: 0 0 30px rgba(255,199,44,.55);
      animation: portal-core 1.15s ease-in-out infinite;
    }
    @keyframes portal-spin { to { transform: rotate(360deg); } }
    @keyframes portal-spin-reverse { to { transform: rotate(-360deg); } }
    @keyframes portal-core { 50% { transform: scale(.82); filter: brightness(1.25); } }

    .header { transform: translateY(-105%); }
    body.site-ready .header { transform: translateY(0); transition: transform .75s cubic-bezier(.16,1,.3,1), background .3s ease, box-shadow .3s ease; }
    .menu a:not(.btn) { position: relative; transition: color .25s ease; }
    .menu a:not(.btn)::after {
      content: "";
      position: absolute;
      left: 50%;
      bottom: -9px;
      width: 0;
      height: 2px;
      border-radius: 999px;
      background: linear-gradient(90deg, var(--green-500), var(--yellow-500));
      transform: translateX(-50%);
      box-shadow: 0 0 10px rgba(23,185,104,.5);
      transition: width .3s cubic-bezier(.16,1,.3,1);
    }
    .menu a:not(.btn):hover::after,
    .menu a:not(.btn).active::after { width: 78%; }
    .menu a:not(.btn).active { color: var(--yellow-500); }

    .btn {
      position: relative;
      isolation: isolate;
      overflow: hidden;
      transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s ease, background .3s ease, filter .3s ease;
    }
    .btn::before {
      content: "";
      position: absolute;
      inset: -80% auto -80% -45%;
      z-index: -1;
      width: 34%;
      transform: rotate(20deg) translateX(-260%);
      background: linear-gradient(90deg, transparent, rgba(255,255,255,.7), transparent);
      transition: transform .75s cubic-bezier(.16,1,.3,1);
    }
    .btn:hover::before { transform: rotate(20deg) translateX(520%); }
    .btn:hover { transform: translateY(-4px) scale(1.015); filter: saturate(1.12); }
    .button-ripple {
      position: absolute;
      width: 12px;
      height: 12px;
      border-radius: 50%;
      pointer-events: none;
      background: rgba(255,255,255,.75);
      transform: translate(-50%, -50%) scale(0);
      animation: button-ripple .65s ease-out forwards;
    }
    @keyframes button-ripple { to { opacity: 0; transform: translate(-50%, -50%) scale(16); } }

    main > section,
    main > .promo {
      position: relative;
      isolation: isolate;
    }
    main > section:not(.hero)::before,
    main > .promo::before {
      content: "";
      position: absolute;
      z-index: -1;
      width: 310px;
      height: 310px;
      border-radius: 50%;
      pointer-events: none;
      background: radial-gradient(circle, rgba(23,185,104,.10), transparent 68%);
      filter: blur(2px);
      opacity: .65;
      top: 10%;
      right: -155px;
      animation: aura-float 8s ease-in-out infinite alternate;
    }
    main > section:nth-of-type(even)::before { right: auto; left: -155px; animation-delay: -3s; }
    @keyframes aura-float { to { transform: translate3d(0, 45px, 0) scale(1.16); opacity: .95; } }

    .section-divider {
      position: absolute;
      z-index: 4;
      left: 50%;
      bottom: -1px;
      width: min(92%, 1180px);
      height: 1px;
      transform: translateX(-50%);
      background: linear-gradient(90deg, transparent, rgba(23,185,104,.55), rgba(255,199,44,.7), rgba(23,185,104,.55), transparent);
      box-shadow: 0 0 18px rgba(23,185,104,.3);
      opacity: .68;
      pointer-events: none;
    }

    .hero::before {
      background-position: center calc(50% + var(--hero-shift, 0px));
      transition: background-position .08s linear;
    }
    .hero-content-intro > * {
      opacity: 0;
      transform: translateY(28px);
      filter: blur(8px);
    }
    body.site-ready .hero-content-intro > * {
      animation: hero-intro .85s cubic-bezier(.16,1,.3,1) forwards;
    }
    body.site-ready .hero-content-intro > *:nth-child(2) { animation-delay: .12s; }
    body.site-ready .hero-content-intro > *:nth-child(3) { animation-delay: .22s; }
    body.site-ready .hero-content-intro > *:nth-child(4) { animation-delay: .32s; }
    body.site-ready .hero-content-intro > *:nth-child(5) { animation-delay: .42s; }
    @keyframes hero-intro { to { opacity: 1; transform: translateY(0); filter: blur(0); } }
    .hero-card {
      animation: hero-card-float 5.5s ease-in-out infinite;
      transform-style: preserve-3d;
    }
    @keyframes hero-card-float { 50% { transform: translateY(-12px) rotate(.25deg); } }

    .parallax-shell { overflow: hidden; transform: translateZ(0); }
    .parallax-media {
      --parallax-y: 0px;
      transform: translate3d(0, var(--parallax-y), 0) scale(1.075);
      transition: transform .12s linear;
      will-change: transform;
    }

    .tilt-card {
      position: relative;
      isolation: isolate;
      --tilt-x: 0deg;
      --tilt-y: 0deg;
      --spot-x: 50%;
      --spot-y: 50%;
      transform: perspective(900px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) translateY(var(--card-lift, 0px));
      transform-style: preserve-3d;
      transition: transform .16s ease, box-shadow .3s ease;
    }
    .tilt-shine {
      position: absolute;
      inset: 0;
      z-index: 3;
      pointer-events: none;
      border-radius: inherit;
      opacity: 0;
      background: radial-gradient(circle at var(--spot-x) var(--spot-y), rgba(255,255,255,.38), transparent 38%);
      transition: opacity .25s ease;
      mix-blend-mode: soft-light;
    }
    .tilt-card:hover .tilt-shine { opacity: 1; }
    .sector-card.tilt-card:hover { --card-lift: -7px; }

    .gallery-sheen {
      position: absolute;
      inset: -70% -30%;
      z-index: 2;
      pointer-events: none;
      background: linear-gradient(110deg, transparent 38%, rgba(255,255,255,.6) 49%, transparent 60%);
      transform: translateX(-70%) rotate(8deg);
      transition: transform .85s cubic-bezier(.16,1,.3,1);
    }
    .gallery-item span { z-index: 4; }
    .gallery-item:hover .gallery-sheen { transform: translateX(70%) rotate(8deg); }
    .gallery-item:hover .parallax-media { transform: translate3d(0, var(--parallax-y), 0) scale(1.14); }

    .feature,
    .info-line,
    .contact-line,
    .faq-item,
    .store-btn,
    .socials a {
      transition: transform .3s cubic-bezier(.16,1,.3,1), border-color .3s ease, background .3s ease, box-shadow .3s ease;
    }
    .feature:hover { transform: translateY(-6px); border-color: rgba(255,218,98,.3); background: rgba(255,255,255,.085); }
    .info-line:hover,
    .contact-line:hover { transform: translateX(7px); }
    .faq-item:hover { border-color: rgba(23,185,104,.35); box-shadow: 0 12px 30px rgba(4,58,31,.07); }
    .store-btn,
    .socials a { position: relative; overflow: hidden; }
    .store-btn:hover,
    .socials a:hover { transform: translateY(-4px) scale(1.03); }

    .field input,
    .field textarea {
      transition: border-color .25s ease, background .25s ease, box-shadow .25s ease, transform .25s ease;
    }
    .field input:focus,
    .field textarea:focus {
      border-color: rgba(255,218,98,.8);
      background: rgba(255,255,255,.12);
      box-shadow: 0 0 0 4px rgba(255,199,44,.1), 0 0 26px rgba(23,185,104,.12);
      transform: translateY(-2px);
    }

    .reveal[data-teleport="spin"] {
      --teleport-scale: .66;
      --teleport-x: 0px;
      transform: translate3d(0, 52px, 0) scale(var(--teleport-scale)) rotate(-4deg);
    }
    .reveal.visible[data-teleport="spin"] { transform: translate3d(0,0,0) scale(1) rotate(0); }

    @media (hover: none), (pointer: coarse) {
      .tilt-card { transform: none !important; }
      .hero-card { animation-duration: 7s; }
      body::before { display: none; }
    }

    @media (max-width: 1050px) {
      .menu a:not(.btn)::after { bottom: 5px; }
    }

    @media (prefers-reduced-motion: reduce) {
      .page-transition { display: none; }
      .header { transform: none; }
      .hero-content-intro > * { opacity: 1; transform: none; filter: none; }
      .hero-card, main > section:not(.hero)::before, main > .promo::before { animation: none !important; }
      .parallax-media { transform: none !important; }
    }

    @media (max-width: 1050px) {
      .menu { position: fixed; top: 82px; left: 20px; right: 20px; display: none; flex-direction: column; align-items: stretch; gap: 0; padding: 15px; border-radius: 20px; background: white; box-shadow: var(--shadow-lg); }
      .menu.open { display: flex; }
      .menu a:not(.btn) { color: var(--ink); padding: 13px 10px; border-bottom: 1px solid var(--border); }
      .menu .btn { margin-top: 12px; }
      .menu-toggle { display: grid; }
      .hero-grid, .promo-box, .split, .experience-grid, .location-card, .faq-grid, .contact-grid { grid-template-columns: 1fr; }
      .hero-grid { padding-top: 116px; gap: 34px; }
      .hero-card { max-width: 760px; }
      .sector-grid { grid-template-columns: repeat(2, 1fr); }
      .promo-image { order: -1; }
      .promo-sticker { right: 6px; }
      .split-image { order: -1; }
      .app-section .split-image { order: initial; }
      .location-card { grid-template-columns: 1fr; }
      .footer-grid { grid-template-columns: repeat(2, 1fr); }
    }

    @media (max-width: 700px) {
      .container { width: min(calc(100% - 28px), var(--max)); }
      .section { padding: 72px 0; }
      .nav { height: 70px; }
      .brand-image { width: 116px; height: 45px; }
      .menu { top: 72px; left: 14px; right: 14px; }
      .hero { min-height: auto; }
      .hero::before { background-image: linear-gradient(180deg, rgba(5,46,29,.74), rgba(5,46,29,.88)), url("../images/hero-super-mana.webp"); background-position: center top; }
      .hero-grid { padding-top: 104px; padding-bottom: 54px; }
      .hero h1 { font-size: clamp(2.65rem, 14vw, 4rem); }
      .hero-actions { flex-direction: column; }
      .hero-actions .btn { width: 100%; }
      .hero-card { border-radius: 24px; padding: 7px; }
      .hero-card img { border-radius: 18px; max-height: 300px; }
      .hero-hours { align-items: flex-start; flex-direction: column; }
      .hero-hours span { text-align: left; }
      .title { font-size: clamp(2rem, 10vw, 3rem); }
      .sector-grid, .feature-grid, .checks, .mini-checks, .gallery-grid, .form-grid { grid-template-columns: 1fr; }
      .promo { padding: 72px 0; }
      .promo-box { padding: 28px 20px; border-radius: 26px; }
      .quality-badge { position: static; margin-top: 13px; }
      .app-card { min-height: 360px; padding: 14px; }
      .app-card img { max-height: none; object-position: center 14%; }
      .store-buttons { flex-direction: column; }
      .store-btn { width: 100%; justify-content: center; }
      .map, .map iframe { min-height: 340px; }
      .location-info { padding: 28px 22px; }
      .form { padding: 22px 18px; }
      .footer-grid { grid-template-columns: 1fr; }
      .copyright { flex-direction: column; }
      .whatsapp-float { right: 15px; bottom: 15px; width: 56px; height: 56px; }
    }

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

    /* =========================================================
       ANIMAÇÕES CINEMATOGRÁFICAS NAS IMAGENS
       ========================================================= */
    .image-fx {
      position: relative;
      isolation: isolate;
      --image-delay: 0ms;
      --image-radius: 28px;
    }

    .image-fx::before {
      content: "";
      position: absolute;
      z-index: 5;
      top: -20%;
      bottom: -20%;
      left: -55%;
      width: 32%;
      pointer-events: none;
      opacity: 0;
      transform: translateX(-180%) skewX(-18deg);
      background: linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.08) 25%,
        rgba(255,255,255,.72) 50%,
        rgba(255,215,82,.24) 72%,
        transparent
      );
      filter: blur(2px);
      mix-blend-mode: screen;
    }

    .image-fx::after {
      content: "";
      position: absolute;
      z-index: 4;
      inset: 0;
      border-radius: inherit;
      pointer-events: none;
      opacity: 0;
      box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.42),
        inset 0 0 34px rgba(23,185,104,.12),
        0 0 0 0 rgba(23,185,104,0);
    }

    .animated-image {
      opacity: 0;
      filter: blur(15px) saturate(.65) brightness(.82);
      clip-path: inset(0 100% 0 0 round var(--image-radius));
      transition:
        opacity .72s ease var(--image-delay),
        filter 1.05s ease var(--image-delay),
        clip-path 1.15s cubic-bezier(.18,.84,.22,1) var(--image-delay),
        box-shadow .5s ease;
      will-change: clip-path, filter, opacity;
    }

    .image-fx.image-visible .animated-image {
      opacity: 1;
      filter: blur(0) saturate(1.04) brightness(1);
      clip-path: inset(0 0 0 0 round var(--image-radius));
    }

    .image-fx.image-visible::before {
      animation: image-light-sweep 6.8s ease-in-out calc(var(--image-delay) + 1s) infinite;
    }

    .image-fx.image-visible::after {
      animation: image-border-energy 1.25s ease-out var(--image-delay) both;
    }

    .sector-image.image-fx,
    .gallery-item.image-fx { --image-radius: 0px; }

    .hero-card.image-fx,
    .experience-image.image-fx,
    .promo-image.image-fx,
    .split-image.image-fx,
    .app-card.image-fx { --image-radius: 28px; }

    .image-fx.image-featured {
      animation: image-shell-float 6.5s ease-in-out infinite;
    }

    .image-fx.image-featured:nth-of-type(even) {
      animation-delay: -2.4s;
    }

    .sector-image.image-visible img,
    .gallery-item.image-visible img {
      animation: image-cinematic-pan 11s ease-in-out infinite alternate;
    }

    .sector-card:hover .sector-image.image-fx img,
    .gallery-item.image-fx:hover img,
    .experience-image.image-fx:hover img,
    .promo-image.image-fx:hover img,
    .split-image.image-fx:hover img {
      filter: saturate(1.12) contrast(1.04) brightness(1.04);
    }

    .image-fx .image-energy-dot {
      position: absolute;
      z-index: 6;
      width: 7px;
      height: 7px;
      border-radius: 50%;
      pointer-events: none;
      opacity: 0;
      background: var(--yellow-400);
      box-shadow:
        0 0 8px rgba(255,218,98,.95),
        0 0 20px rgba(23,185,104,.75);
    }

    .image-fx.image-visible .image-energy-dot {
      animation: image-energy-orbit 2.2s cubic-bezier(.2,.8,.2,1) var(--dot-delay, 0ms) both;
    }

    @keyframes image-light-sweep {
      0%, 58% { opacity: 0; transform: translateX(-180%) skewX(-18deg); }
      64% { opacity: .78; }
      78% { opacity: .15; transform: translateX(650%) skewX(-18deg); }
      79%, 100% { opacity: 0; transform: translateX(650%) skewX(-18deg); }
    }

    @keyframes image-border-energy {
      0% {
        opacity: 0;
        box-shadow: inset 0 0 0 1px rgba(255,255,255,0), 0 0 0 0 rgba(23,185,104,0);
      }
      45% {
        opacity: 1;
        box-shadow: inset 0 0 0 1px rgba(255,255,255,.65), 0 0 0 7px rgba(23,185,104,.12), 0 0 38px rgba(23,185,104,.28);
      }
      100% {
        opacity: .34;
        box-shadow: inset 0 0 0 1px rgba(255,255,255,.32), 0 0 0 0 rgba(23,185,104,0);
      }
    }

    @keyframes image-shell-float {
      0%, 100% { translate: 0 0; }
      50% { translate: 0 -7px; }
    }

    @keyframes image-cinematic-pan {
      0% { object-position: 47% 50%; }
      100% { object-position: 53% 50%; }
    }

    @keyframes image-energy-orbit {
      0% {
        opacity: 0;
        left: var(--dot-x-start);
        top: var(--dot-y-start);
        transform: translate(-50%, -50%) scale(.2);
      }
      22% { opacity: 1; }
      72% { opacity: .9; }
      100% {
        opacity: 0;
        left: var(--dot-x-end);
        top: var(--dot-y-end);
        transform: translate(-50%, -50%) scale(1.25);
      }
    }

    @media (hover: hover) and (pointer: fine) {
      .image-fx { transition: filter .35s ease; }
      .image-fx:hover::after {
        opacity: .7;
        box-shadow:
          inset 0 0 0 1px rgba(255,255,255,.48),
          inset 0 0 42px rgba(23,185,104,.16),
          0 20px 46px rgba(4,58,31,.18);
      }
      .image-fx:hover::before {
        animation-duration: 2.2s;
      }
    }

    @media (max-width: 760px) {
      .image-fx.image-featured { animation: none; }
      .sector-image.image-visible img,
      .gallery-item.image-visible img { animation-duration: 16s; }
      .image-fx.image-visible::before { animation-iteration-count: 2; }
      .image-fx .image-energy-dot:nth-of-type(n+3) { display: none; }
    }

    @media (prefers-reduced-motion: reduce) {
      .animated-image {
        opacity: 1 !important;
        filter: none !important;
        clip-path: none !important;
        transition: none !important;
      }
      .image-fx,
      .image-fx::before,
      .image-fx::after,
      .image-fx img,
      .image-energy-dot {
        animation: none !important;
        transition: none !important;
      }
    }


    /* =========================================================
       COMPATIBILIDADE + MOVIMENTO PROFISSIONAL
       Se o JavaScript não rodar, o conteúdo continua visível.
       Se rodar, entram animações leves, responsivas e elegantes.
       ========================================================= */
    .page-transition { display: none !important; }
    .header { transform: translateY(0) !important; }

    /* Fallback seguro: nunca deixa conteúdo invisível sem JS */
    .reveal,
    .animated-image {
      opacity: 1;
      transform: none;
      filter: none;
      clip-path: none;
    }

    /* Entrada elegante dos blocos ao rolar a página */
    .motion-ready .reveal,
    .motion-ready .reveal[data-teleport="left"],
    .motion-ready .reveal[data-teleport="right"],
    .motion-ready .reveal[data-teleport="zoom"],
    .motion-ready .reveal[data-teleport="spin"] {
      opacity: 0 !important;
      transform: translate3d(0, 28px, 0) scale(.985) !important;
      filter: blur(5px) !important;
      clip-path: none !important;
      transition:
        opacity .72s ease,
        transform .82s cubic-bezier(.16,1,.3,1),
        filter .72s ease !important;
      transition-delay: var(--teleport-delay, 0ms) !important;
      will-change: opacity, transform, filter;
    }

    .motion-ready .reveal.visible,
    .motion-ready .reveal.visible[data-teleport="left"],
    .motion-ready .reveal.visible[data-teleport="right"],
    .motion-ready .reveal.visible[data-teleport="zoom"],
    .motion-ready .reveal.visible[data-teleport="spin"] {
      opacity: 1 !important;
      transform: translate3d(0,0,0) scale(1) !important;
      filter: none !important;
    }

    /* Remove o efeito antigo de "teletransporte" e mantém o visual mais premium */
    .reveal::before,
    .reveal::after,
    .image-energy-dot {
      display: none !important;
    }

    /* Revelação suave e cinematográfica das imagens */
    .motion-ready .animated-image,
    .motion-ready .image-fx .animated-image {
      opacity: 0 !important;
      transform: scale(1.035);
      filter: blur(8px) saturate(.88) brightness(.94) !important;
      clip-path: inset(0 0 10% 0 round var(--image-radius, 24px)) !important;
      transition:
        opacity .72s ease var(--image-delay, 0ms),
        transform 1.05s cubic-bezier(.16,1,.3,1) var(--image-delay, 0ms),
        filter .9s ease var(--image-delay, 0ms),
        clip-path .95s cubic-bezier(.16,1,.3,1) var(--image-delay, 0ms) !important;
      will-change: opacity, transform, filter;
    }

    .motion-ready .image-fx.image-visible .animated-image {
      opacity: 1 !important;
      transform: scale(1);
      filter: none !important;
      clip-path: inset(0 0 0 0 round var(--image-radius, 24px)) !important;
    }

    /* Luz discreta passando pelas imagens */
    .image-fx::before {
      display: block !important;
      opacity: 0;
      width: 22%;
      left: -45%;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,.34), transparent);
      filter: blur(1px);
      mix-blend-mode: screen;
    }
    .motion-ready .image-fx.image-visible::before {
      animation: mana-image-sheen 7.5s ease-in-out 1.2s infinite !important;
    }

    /* Mantém a foto do topo mais clara e melhor enquadrada */
    .hero::before {
      background-position: center 42% !important;
    }
    @media (max-width: 700px) {
      .hero::before {
        background-position: 58% center !important;
      }
    }

  

    /* =========================================================
       EXPERIÊNCIA MOBILE OTIMIZADA — CELULARES E TELAS PEQUENAS
       ========================================================= */
    @media (max-width: 760px) {
      html {
        scroll-padding-top: 78px;
        -webkit-text-size-adjust: 100%;
      }
      html, body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
      }
      body {
        min-width: 0;
        font-size: 16px;
        line-height: 1.55;
        padding-bottom: 0;
      }
      .footer {
        padding-bottom: env(safe-area-inset-bottom);
      }
      section[id] { scroll-margin-top: 78px; }
      img { height: auto; }
      .container { width: min(calc(100% - 28px), var(--max)); }
      .section { padding: 64px 0; }
      .section-sm { padding: 42px 0; }
      .title {
        margin-top: 10px;
        font-size: clamp(1.95rem, 9.2vw, 2.7rem);
        line-height: 1.08;
        letter-spacing: -.04em;
      }
      .lead {
        margin-top: 14px;
        font-size: .98rem;
        line-height: 1.68;
      }
      .eyebrow {
        gap: 7px;
        font-size: .7rem;
        letter-spacing: .11em;
      }

      /* Cabeçalho branco e legível no celular */
      .header,
      .header.scrolled {
        background: rgba(255,255,255,.97) !important;
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border-bottom: 1px solid var(--border);
        box-shadow: 0 7px 24px rgba(3,42,23,.09);
      }
      .nav {
        height: 62px;
        gap: 10px;
      }
      .brand-image {
        width: 102px;
        height: 39px;
        padding: 2px 6px;
        border-radius: 12px;
        box-shadow: none;
      }
      .menu-toggle,
      .header.scrolled .menu-toggle {
        display: grid;
        width: 42px;
        height: 42px;
        flex: 0 0 42px;
        color: white;
        background: var(--green-700);
        border: 0;
        border-radius: 13px;
        box-shadow: 0 9px 22px rgba(8,122,67,.24);
      }
      .menu-toggle i { display: none; }
      .menu-toggle::before {
        content: "☰";
        font-size: 1.45rem;
        line-height: 1;
        font-weight: 700;
      }
      .menu-toggle[aria-expanded="true"]::before { content: "✕"; }
      .menu {
        top: calc(62px + env(safe-area-inset-top));
        left: 14px;
        right: 14px;
        max-height: calc(100dvh - 82px - env(safe-area-inset-top));
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 10px;
        border: 1px solid var(--border);
        border-radius: 18px;
        box-shadow: 0 24px 60px rgba(3,42,23,.2);
      }
      .menu a:not(.btn) {
        min-height: 49px;
        display: flex;
        align-items: center;
        padding: 11px 13px;
        border-radius: 11px;
        border-bottom: 0;
        color: var(--ink);
        font-size: .96rem;
      }
      .menu a:not(.btn):active { background: var(--green-50); }
      .menu .btn {
        min-height: 50px;
        margin-top: 8px;
      }

      /* Hero: foto inteira primeiro, conteúdo bem organizado depois */
      .hero {
        min-height: auto;
        padding: 0;
        background:
          radial-gradient(circle at 85% 8%, rgba(23,185,104,.25), transparent 34%),
          linear-gradient(155deg, #073d27 0%, #052e1d 58%, #031f14 100%);
      }
      .hero::before {
        /* Mantém no celular a mesma foto de fundo do computador,
           mais escura e suavizada para destacar os textos e botões. */
        background-position: 58% center !important;
        background-size: cover !important;
        opacity: .9;
        filter: brightness(.82) saturate(.86);
        transform: scale(1.025);
      }
      .hero::after {
        /* Camada verde-escura sobre a foto para o efeito apagado do desktop. */
        background:
          radial-gradient(circle at 12% 18%, rgba(23,185,104,.16), transparent 34%),
          linear-gradient(180deg, rgba(3,35,22,.34) 0%, rgba(3,31,20,.54) 45%, rgba(2,23,15,.78) 100%);
      }
      .hero-grid {
        display: flex;
        flex-direction: column;
        gap: 0;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        padding-top: 90px;
        padding-bottom: 42px;
      }
      .hero-grid > *,
      .hero-grid > .reveal:first-child,
      .hero-grid > .reveal:last-child {
        min-width: 0;
        max-width: 100%;
      }
      .hero-grid > .reveal:first-child {
        order: 2;
        width: 100%;
        margin-top: 26px;
      }
      .hero-grid > .reveal:last-child {
        display: contents;
      }
      .hero-card {
        order: 1;
        width: 100%;
        max-width: none;
        margin: 0;
        padding: 5px;
        border-radius: 22px;
        background: rgba(255,255,255,.12);
        border: 1px solid rgba(255,255,255,.2);
        box-shadow: 0 18px 45px rgba(0,0,0,.28);
        animation: none !important;
      }
      .hero-card img {
        width: 100%;
        max-height: none;
        aspect-ratio: 16 / 9;
        object-fit: cover;
        object-position: center;
        border-radius: 17px;
        background: transparent;
      }
      .hero-hours {
        order: 3;
        width: 100%;
        margin-top: 24px;
        padding: 16px;
        align-items: flex-start;
        flex-direction: column;
        gap: 6px;
        border-radius: 17px;
        background: rgba(0,0,0,.24);
      }
      .hero-hours strong { font-size: .72rem; }
      .hero-hours span {
        text-align: left;
        font-size: .88rem;
        line-height: 1.55;
      }
      .hero-kicker {
        max-width: 100%;
        padding: 7px 11px;
        font-size: .66rem;
        letter-spacing: .1em;
      }
      .hero h1 {
        max-width: 100%;
        margin-top: 17px;
        font-size: clamp(2.45rem, 13vw, 3.45rem);
        line-height: 1.01;
        letter-spacing: -.052em;
      }
      .hero p {
        max-width: 100%;
        margin-top: 18px;
        font-size: .98rem;
        line-height: 1.65;
        color: rgba(255,255,255,.84);
      }
      .hero-actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
        margin-top: 24px;
      }
      .hero-actions .btn {
        width: 100%;
        min-height: 52px;
        padding-inline: 18px;
        font-size: .95rem;
      }
      .hero-tags {
        display: flex;
        flex-wrap: nowrap;
        width: calc(100% + 28px);
        max-width: calc(100% + 28px);
        min-width: 0;
        gap: 9px;
        margin: 22px -14px 0;
        padding: 0 14px 7px;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
      }
      .hero-tags::-webkit-scrollbar { display: none; }
      .hero-tag {
        flex: 0 0 auto;
        min-height: 42px;
        padding: 9px 12px;
        scroll-snap-align: start;
        font-size: .77rem;
      }

      /* Faixa de diferenciais mais leve */
      .marquee-item {
        min-height: 52px;
        padding: 0 20px;
        font-size: .69rem;
        letter-spacing: .065em;
      }
      .marquee-item::after { margin-left: 14px; }
      .marquee-track { animation-duration: 38s; }

      /* Cards e seções */
      main, section, footer,
      .sector-grid, .experience-grid, .feature-grid, .promo-box,
      .split, .location-card, .gallery-grid, .faq-grid,
      .contact-grid, .footer-grid {
        min-width: 0;
        max-width: 100%;
      }
      .sector-grid > *, .experience-grid > *, .feature-grid > *,
      .promo-box > *, .split > *, .location-card > *,
      .gallery-grid > *, .faq-grid > *, .contact-grid > *,
      .footer-grid > * { min-width: 0; }
      .sector-grid {
        margin-top: 32px;
        grid-template-columns: 1fr;
        gap: 16px;
      }
      .sector-card { border-radius: 21px; }
      .sector-image { aspect-ratio: 4 / 3; }
      .sector-body {
        padding: 17px;
        min-height: 124px;
        font-size: .9rem;
        line-height: 1.6;
      }
      .sector-name {
        left: 13px;
        right: 13px;
        bottom: 13px;
        font-size: .95rem;
      }
      .sector-name i {
        width: 37px;
        height: 37px;
        flex-basis: 37px;
      }
      .experience-grid,
      .split,
      .promo-box,
      .location-card,
      .faq-grid,
      .contact-grid {
        gap: 30px;
      }
      .feature-grid {
        grid-template-columns: 1fr;
        gap: 12px;
        margin-top: 25px;
      }
      .feature {
        padding: 17px;
        border-radius: 17px;
      }
      .experience-image img,
      .split-image img,
      .promo-image img {
        border-radius: 22px;
      }
      .quality-badge {
        margin-top: 11px;
        padding: 17px;
        border-radius: 17px;
      }
      .quality-badge strong { font-size: 1.2rem; }

      .promo { padding: 64px 0; }
      .promo-box {
        padding: 24px 18px;
        border-radius: 24px;
      }
      .promo-image { order: -1; }
      .promo-image img { aspect-ratio: 4 / 3; }
      .promo-sticker {
        top: -9px;
        right: -5px;
        width: 82px;
        height: 82px;
        font-size: .77rem;
      }
      .checks,
      .mini-checks {
        grid-template-columns: 1fr;
        gap: 10px;
      }
      .check,
      .mini-check { font-size: .87rem; }

      .app-card {
        min-height: 330px;
        padding: 12px;
        border-radius: 24px;
      }
      .app-card img { max-height: none; border-radius: 18px; object-position: center 12%; }
      .store-buttons {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
      }
      .store-btn {
        width: 100%;
        min-height: 58px;
        justify-content: center;
      }

      .location-card {
        margin-top: 32px;
        border-radius: 22px;
      }
      .map,
      .map iframe { min-height: 285px; }
      .location-info { padding: 24px 19px; }
      .location-info h3 { font-size: 1.45rem; }
      .info-line { margin-top: 16px; font-size: .91rem; }

      .gallery-grid {
        margin-top: 30px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
      }
      .gallery-item {
        aspect-ratio: 4 / 5;
        border-radius: 17px;
      }
      .gallery-item span {
        left: 8px;
        right: 8px;
        bottom: 8px;
        padding: 8px 9px;
        border-radius: 10px;
        font-size: .69rem;
        line-height: 1.35;
      }

      .faq-question {
        min-height: 58px;
        padding: 18px 0;
        font-size: .94rem;
        line-height: 1.4;
      }
      .faq-answer { font-size: .91rem; }

      .contact-grid { grid-template-columns: 1fr; }
      .contact-list { gap: 14px; margin-top: 24px; }
      .contact-line { font-size: .91rem; }
      .form {
        padding: 20px 16px;
        border-radius: 22px;
      }
      .form-grid { grid-template-columns: 1fr; gap: 13px; }
      .field.full { grid-column: auto; }
      .field input,
      .field textarea,
      .field select {
        min-height: 50px;
        padding: 13px 14px;
        border-radius: 13px;
        font-size: 16px;
      }

      .footer-grid {
        grid-template-columns: 1fr;
        gap: 28px;
        padding: 44px 0 36px;
      }
      .footer-logo { width: 132px; }
      .copyright {
        padding: 18px 0 28px;
        gap: 7px;
        font-size: .73rem;
        line-height: 1.55;
      }
      .whatsapp-float {
        right: max(14px, env(safe-area-inset-right));
        bottom: max(14px, env(safe-area-inset-bottom));
        width: 56px;
        height: 56px;
        font-size: 1.55rem;
      }

      /* Reduz efeitos pesados no celular para melhorar desempenho */
      .hero-card,
      .image-fx,
      .image-fx img,
      .parallax-media,
      main > section:not(.hero)::before,
      main > .promo::before {
        animation: none !important;
        transform: none !important;
      }
      .gallery-sheen,
      .tilt-shine { display: none !important; }
      #scrollProgress { height: 3px; }
    }

    @media (max-width: 390px) {
      .container { width: min(calc(100% - 22px), var(--max)); }
      .hero-grid { padding-top: 84px; }
      .hero h1 { font-size: 2.35rem; }
      .hero-kicker { font-size: .61rem; }
      .hero-actions .btn { font-size: .9rem; }
      .gallery-grid { grid-template-columns: 1fr; }
      .gallery-item { aspect-ratio: 4 / 5; }
      .gallery-item span { font-size: .76rem; }
    }

  
    /* =========================================================
       MICROINTERAÇÕES PROFISSIONAIS — BOTÕES, IMAGENS E CARDS
       ========================================================= */
    @keyframes mana-image-sheen {
      0%, 62% { opacity: 0; transform: translateX(-180%) skewX(-16deg); }
      68% { opacity: .58; }
      82% { opacity: .08; transform: translateX(760%) skewX(-16deg); }
      83%, 100% { opacity: 0; transform: translateX(760%) skewX(-16deg); }
    }

    @keyframes mana-button-breathe {
      0%, 100% { box-shadow: 0 12px 30px rgba(11,152,81,.22); }
      50% { box-shadow: 0 15px 38px rgba(11,152,81,.38), 0 0 0 5px rgba(23,185,104,.055); }
    }

    @keyframes mana-yellow-breathe {
      0%, 100% { box-shadow: 0 12px 30px rgba(255,199,44,.20); }
      50% { box-shadow: 0 16px 38px rgba(255,199,44,.35), 0 0 0 5px rgba(255,199,44,.055); }
    }

    @keyframes mana-soft-float {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-4px); }
    }

    /* Botões: brilho, profundidade e resposta imediata */
    .btn,
    .store-btn,
    .socials a,
    .faq-question {
      -webkit-tap-highlight-color: transparent;
    }

    .btn {
      transform: translateZ(0);
      transition:
        transform .26s cubic-bezier(.16,1,.3,1),
        box-shadow .3s ease,
        filter .3s ease,
        background .3s ease !important;
    }

    .btn-primary {
      animation: mana-button-breathe 3.8s ease-in-out infinite;
    }

    .btn-yellow {
      animation: mana-yellow-breathe 3.8s ease-in-out infinite;
    }

    .btn:hover {
      transform: translateY(-5px) scale(1.025) !important;
      filter: saturate(1.12) brightness(1.03);
    }

    .btn:active {
      transform: translateY(-1px) scale(.975) !important;
      transition-duration: .08s !important;
    }

    .btn i {
      transition: transform .28s cubic-bezier(.16,1,.3,1);
    }

    .btn:hover i {
      transform: translateX(3px) scale(1.08);
    }

    /* Cards com profundidade sem exagero */
    .sector-card,
    .feature,
    .promo-box,
    .location-card,
    .app-card,
    .form,
    .gallery-item {
      transition:
        transform .38s cubic-bezier(.16,1,.3,1),
        box-shadow .38s ease,
        border-color .3s ease,
        filter .3s ease !important;
    }

    .sector-card:hover,
    .feature:hover,
    .location-card:hover,
    .app-card:hover {
      transform: translateY(-7px);
      box-shadow: 0 24px 56px rgba(4,58,31,.15);
    }

    /* Imagens com zoom suave e enquadramento vivo */
    .sector-image img,
    .gallery-item img,
    .experience-image img,
    .promo-image img,
    .split-image img,
    .app-card img,
    .hero-card img {
      transform-origin: center center;
      transition:
        transform .75s cubic-bezier(.16,1,.3,1),
        filter .45s ease !important;
    }

    .sector-card:hover .sector-image img,
    .gallery-item:hover img,
    .experience-image:hover img,
    .promo-image:hover img,
    .split-image:hover img,
    .app-card:hover img,
    .hero-card:hover img {
      transform: scale(1.045);
      filter: saturate(1.07) contrast(1.025) brightness(1.025);
    }

    /* Ícones sociais com microinteração */
    .socials a {
      transition: transform .28s cubic-bezier(.16,1,.3,1), background .28s ease, border-color .28s ease !important;
    }
    .socials a:hover {
      transform: translateY(-4px) rotate(-4deg) scale(1.08);
      background: rgba(255,255,255,.1);
      border-color: rgba(255,255,255,.35);
    }

    /* FAQ fica mais responsivo ao passar/tocar */
    .faq-question {
      transition: transform .22s ease, color .22s ease, background .22s ease !important;
    }
    .faq-question:hover {
      transform: translateX(4px);
    }

    /* Mobile: mantém movimento, mas leve para preservar velocidade */
    @media (max-width: 760px) {
      .motion-ready .reveal,
      .motion-ready .reveal[data-teleport="left"],
      .motion-ready .reveal[data-teleport="right"],
      .motion-ready .reveal[data-teleport="zoom"],
      .motion-ready .reveal[data-teleport="spin"] {
        opacity: 0 !important;
        transform: translate3d(0, 20px, 0) scale(.992) !important;
        filter: blur(3px) !important;
        transition:
          opacity .58s ease,
          transform .68s cubic-bezier(.16,1,.3,1),
          filter .58s ease !important;
        transition-delay: min(var(--teleport-delay, 0ms), 180ms) !important;
      }

      .motion-ready .reveal.visible,
      .motion-ready .reveal.visible[data-teleport="left"],
      .motion-ready .reveal.visible[data-teleport="right"],
      .motion-ready .reveal.visible[data-teleport="zoom"],
      .motion-ready .reveal.visible[data-teleport="spin"] {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
      }

      .motion-ready .image-fx,
      .motion-ready .image-fx img,
      .motion-ready .parallax-media {
        animation: none !important;
      }

      .motion-ready .animated-image,
      .motion-ready .image-fx .animated-image {
        opacity: 0 !important;
        transform: scale(1.025) !important;
        filter: blur(5px) saturate(.92) !important;
        clip-path: inset(0 0 7% 0 round var(--image-radius, 20px)) !important;
        transition:
          opacity .58s ease var(--image-delay, 0ms),
          transform .72s cubic-bezier(.16,1,.3,1) var(--image-delay, 0ms),
          filter .62s ease var(--image-delay, 0ms),
          clip-path .68s ease var(--image-delay, 0ms) !important;
      }

      .motion-ready .image-fx.image-visible .animated-image {
        opacity: 1 !important;
        transform: scale(1) !important;
        filter: none !important;
        clip-path: inset(0 0 0 0 round var(--image-radius, 20px)) !important;
      }

      .motion-ready .image-fx.image-visible::before {
        animation: mana-image-sheen 9s ease-in-out 1.5s 2 !important;
      }

      .btn-primary,
      .btn-yellow {
        animation-duration: 4.8s;
      }

      .sector-card:active,
      .feature:active,
      .gallery-item:active {
        transform: scale(.985) !important;
      }

      .sector-card:active .sector-image img,
      .gallery-item:active img {
        transform: scale(1.025) !important;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .btn-primary,
      .btn-yellow {
        animation: none !important;
      }
    }

  

/* ===== BLOCO CSS 2 ===== */

    /* ==========================================
       CAÇA AO QR CODE — SUPER MANÁ
       ========================================== */
    .qr-nav-link {
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    .qr-hunt-section {
      position: relative;
      overflow: hidden;
      color: #fff;
      background:
        radial-gradient(circle at 10% 12%, rgba(255,199,44,.28), transparent 20%),
        radial-gradient(circle at 88% 18%, rgba(83,255,176,.18), transparent 22%),
        radial-gradient(circle at 82% 82%, rgba(29,202,114,.20), transparent 24%),
        linear-gradient(135deg, #032317 0%, #06472a 42%, #098247 100%);
      isolation: isolate;
    }

    .qr-hunt-section::before,
    .qr-hunt-section::after {
      content: "";
      position: absolute;
      border-radius: 50%;
      pointer-events: none;
      filter: blur(1px);
    }

    .qr-hunt-section::before {
      width: 420px;
      height: 420px;
      right: -120px;
      top: -160px;
      background: radial-gradient(circle, rgba(255,255,255,.10) 0%, rgba(255,255,255,.02) 44%, rgba(255,255,255,0) 72%);
      animation: ficturGlow 7s ease-in-out infinite;
    }

    .qr-hunt-section::after {
      width: 300px;
      height: 300px;
      left: -90px;
      bottom: -110px;
      background: radial-gradient(circle, rgba(255,199,44,.18) 0%, rgba(255,199,44,.06) 42%, rgba(255,199,44,0) 74%);
      animation: ficturGlow 9s ease-in-out infinite reverse;
    }

    .qr-hunt-grid {
      position: relative;
      z-index: 2;
      display: grid;
      grid-template-columns: minmax(0, 1.04fr) minmax(360px, .96fr);
      gap: 46px;
      align-items: center;
    }

    .qr-hunt-section .title {
      color: #fff;
      max-width: 760px;
      font-size: clamp(2.45rem, 5vw, 4.5rem);
      line-height: .96;
      letter-spacing: -0.04em;
      text-wrap: balance;
      text-shadow: 0 10px 28px rgba(0,0,0,.18);
    }

    .qr-hunt-section .lead {
      color: rgba(255,255,255,.86);
      max-width: 730px;
      font-size: 1.02rem;
      line-height: 1.7;
    }

    .qr-hunt-section .lead strong {
      color: #ffdb71;
      font-weight: 800;
    }

    .qr-hunt-badge {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      min-height: 36px;
      padding: 0 16px;
      border-radius: 999px;
      color: #1b2a20;
      background: linear-gradient(135deg, #ffd95d, #ffc82d);
      font-size: .79rem;
      font-weight: 900;
      letter-spacing: .09em;
      text-transform: uppercase;
      box-shadow: 0 14px 36px rgba(255,199,44,.20);
      animation: ficturPulse 3s ease-in-out infinite;
    }

    .fictur-highlight-row {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin: 22px 0 10px;
    }

    .fictur-highlight-pill {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      min-height: 48px;
      padding: 0 16px;
      border-radius: 999px;
      background: rgba(255,255,255,.10);
      border: 1px solid rgba(255,255,255,.12);
      box-shadow: 0 10px 30px rgba(0,0,0,.10);
      backdrop-filter: blur(14px);
      font-weight: 700;
      color: #fff;
      animation: ficturFloat 5.5s ease-in-out infinite;
    }

    .fictur-highlight-pill:nth-child(2) { animation-delay: .35s; }
    .fictur-highlight-pill:nth-child(3) { animation-delay: .7s; }

    .fictur-highlight-pill i {
      width: 28px;
      height: 28px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      background: rgba(255, 203, 61, .16);
      color: #ffd95d;
      flex: 0 0 auto;
    }

    .qr-hunt-steps {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 14px;
      margin: 30px 0 26px;
    }

    .qr-hunt-step {
      position: relative;
      min-height: 122px;
      padding: 18px;
      border-radius: 22px;
      border: 1px solid rgba(255,255,255,.14);
      background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
      backdrop-filter: blur(14px);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 14px 28px rgba(0,0,0,.10);
      transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
      animation: ficturFloat 6.5s ease-in-out infinite;
    }

    .qr-hunt-step:nth-child(2) { animation-delay: .18s; }
    .qr-hunt-step:nth-child(3) { animation-delay: .36s; }
    .qr-hunt-step:nth-child(4) { animation-delay: .54s; }
    .qr-hunt-step:nth-child(5) { animation-delay: .72s; }
    .qr-hunt-step:nth-child(6) { animation-delay: .9s; }

    .qr-hunt-step::after {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      background: linear-gradient(120deg, rgba(255,255,255,.14), transparent 40%);
      opacity: .7;
      pointer-events: none;
    }

    .qr-hunt-step:hover {
      transform: translateY(-6px) scale(1.01);
      border-color: rgba(255,221,115,.38);
      box-shadow: 0 22px 38px rgba(0,0,0,.16), 0 0 0 1px rgba(255,221,115,.08);
    }

    .qr-hunt-step strong {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 8px;
      font-family: "Montserrat", sans-serif;
      font-size: .95rem;
      line-height: 1.35;
    }

    .qr-hunt-step strong i { color: var(--yellow-400); }

    .qr-hunt-step span {
      display: block;
      color: rgba(255,255,255,.80);
      font-size: .84rem;
      line-height: 1.58;
    }

    .qr-hunt-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 22px;
    }

    .qr-hunt-actions .btn,
    .fictur-main-cta {
      min-height: 56px;
      font-weight: 800;
      box-shadow: 0 18px 36px rgba(255, 199, 44, .16);
      position: relative;
      overflow: hidden;
    }

    .fictur-main-cta {
      animation: ficturPulse 2.8s ease-in-out infinite;
    }

    .fictur-main-cta::after {
      content: "";
      position: absolute;
      top: 0;
      left: -40%;
      width: 35%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
      transform: skewX(-18deg);
      animation: ficturShine 3.6s ease-in-out infinite;
    }

    .qr-hunt-note {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      margin-top: 18px;
      color: rgba(255,255,255,.78);
      font-size: .84rem;
      line-height: 1.65;
      max-width: 760px;
    }

    .qr-hunt-note i {
      color: var(--yellow-400);
      font-size: 1rem;
      margin-top: 2px;
    }

    .qr-game-card {
      position: relative;
      overflow: hidden;
      padding: 30px;
      border-radius: 34px;
      color: var(--ink);
      background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(247,250,248,.98));
      box-shadow: 0 34px 90px rgba(0,0,0,.24);
      border: 1px solid rgba(255,255,255,.55);
      animation: ficturFloat 6.5s ease-in-out infinite;
    }

    .qr-game-card::before {
      content: "";
      position: absolute;
      width: 220px;
      height: 220px;
      right: -70px;
      top: -86px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(255,207,82,.44) 0%, rgba(255,207,82,.16) 46%, rgba(255,207,82,0) 72%);
    }

    .qr-game-card::after {
      content: "";
      position: absolute;
      inset: 12px;
      border-radius: 26px;
      border: 1px solid rgba(7,109,62,.08);
      pointer-events: none;
    }

    @keyframes ficturGlow {
      0%, 100% { transform: scale(1) translate3d(0,0,0); opacity: 1; }
      50% { transform: scale(1.08) translate3d(8px,-8px,0); opacity: .72; }
    }

    @keyframes ficturPulse {
      0%, 100% { transform: translateY(0); box-shadow: 0 14px 36px rgba(255,199,44,.18); }
      50% { transform: translateY(-2px); box-shadow: 0 18px 44px rgba(255,199,44,.28); }
    }

    @keyframes ficturFloat {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-4px); }
    }

    @keyframes ficturShine {
      0% { left: -42%; opacity: 0; }
      15% { opacity: 1; }
      42% { left: 118%; opacity: 0; }
      100% { left: 118%; opacity: 0; }
    }

    .qr-game-head {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      margin-bottom: 22px;
    }

    .qr-game-head h3 {
      margin: 0;
      font-family: "Montserrat", sans-serif;
      font-size: 1.28rem;
      color: var(--green-950);
    }

    .qr-game-head p {
      margin: 5px 0 0;
      color: var(--muted);
      font-size: .83rem;
    }

    .qr-icon-box {
      flex: 0 0 58px;
      width: 58px;
      height: 58px;
      display: grid;
      place-items: center;
      border-radius: 18px;
      color: var(--green-950);
      background: var(--yellow-500);
      font-size: 1.65rem;
      box-shadow: 0 10px 26px rgba(255,199,44,.22);
    }

    .qr-found-alert {
      display: none;
      position: relative;
      margin-bottom: 16px;
      padding: 16px 17px;
      border-radius: 18px;
      border: 1px solid rgba(8,122,67,.18);
      background: var(--green-50);
      color: var(--green-900);
    }

    .qr-found-alert.show { display: block; animation: qrPop .45s cubic-bezier(.16,1,.3,1); }
    .qr-found-alert strong { display: block; margin-bottom: 3px; }
    .qr-found-alert small { color: #52705e; line-height: 1.45; }

    @keyframes qrPop {
      from { transform: scale(.96); opacity: 0; }
      to { transform: scale(1); opacity: 1; }
    }

    .qr-code-ticket {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      margin-bottom: 18px;
      padding: 15px 16px;
      border-radius: 18px;
      border: 1.5px dashed rgba(8,122,67,.28);
      background: #f8fcfa;
    }

    .qr-code-ticket span {
      display: block;
      color: var(--muted);
      font-size: .72rem;
      font-weight: 800;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    .qr-code-ticket strong {
      display: block;
      margin-top: 3px;
      color: var(--green-900);
      font-family: "Montserrat", sans-serif;
      font-size: 1rem;
      letter-spacing: .04em;
      word-break: break-all;
    }

    .qr-status-dot {
      flex: 0 0 38px;
      width: 38px;
      height: 38px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      color: var(--green-700);
      background: var(--green-100);
      font-size: 1.05rem;
    }

    .qr-progress-row {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 14px;
      align-items: end;
      margin: 4px 0 9px;
    }

    .qr-progress-row span {
      color: var(--muted);
      font-size: .78rem;
      font-weight: 800;
    }

    .qr-progress-row strong {
      color: var(--green-900);
      font-family: "Montserrat", sans-serif;
      font-size: 1.2rem;
    }

    .qr-progress-track {
      height: 10px;
      overflow: hidden;
      border-radius: 999px;
      background: #e9f3ed;
    }

    .qr-progress-fill {
      width: 8%;
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, var(--green-600), var(--yellow-500));
      transition: width .55s cubic-bezier(.16,1,.3,1);
    }

    .qr-found-list {
      display: flex;
      flex-wrap: wrap;
      gap: 7px;
      min-height: 34px;
      margin-top: 15px;
    }

    .qr-found-chip,
    .qr-empty-chip {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      min-height: 30px;
      padding: 0 10px;
      border-radius: 999px;
      font-size: .73rem;
      font-weight: 800;
    }

    .qr-found-chip {
      color: var(--green-900);
      background: var(--green-100);
    }

    .qr-empty-chip {
      color: #7e8c83;
      background: #f2f5f3;
    }

    .qr-registration-gate {
      position: relative;
      margin-top: 22px;
      padding: 18px;
      border-radius: 20px;
      border: 1px solid rgba(255,199,44,.42);
      background: #fffbeb;
    }

    .qr-registration-gate h4 {
      display: flex;
      align-items: center;
      gap: 8px;
      margin: 0 0 7px;
      color: #563e00;
      font-size: .95rem;
    }

    .qr-registration-gate h4 i { color: #b98700; }
    .qr-registration-gate p {
      margin: 0;
      color: #735f25;
      font-size: .82rem;
      line-height: 1.55;
    }

    .qr-registration-gate .gate-state {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-top: 12px;
      color: #795f12;
      font-size: .77rem;
      font-weight: 800;
    }

    .qr-registration-gate { scroll-margin-top: 110px; }

    .qr-os-choice-title {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-top: 16px;
      color: #3f3210;
      font-size: .88rem;
      font-weight: 900;
    }

    .qr-app-buttons {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      margin-top: 10px;
    }

    .qr-app-button {
      min-height: 50px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 0 13px;
      border-radius: 14px;
      color: #fff;
      background: #0f1813;
      font-size: .82rem;
      font-weight: 800;
      transition: transform .2s ease, box-shadow .2s ease;
    }

    .qr-app-button:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(0,0,0,.14); }



    /* CTA de comprovante + destaque de sorteio/cashback */
    .qr-whatsapp-proof-btn {
      position: relative;
      overflow: hidden;
      color: #fff !important;
      background: linear-gradient(135deg, #0c8f43 0%, #15b95f 55%, #0fa34e 100%);
      border: 1px solid rgba(255,255,255,.42);
      box-shadow: 0 0 0 3px rgba(51,255,130,.12), 0 14px 34px rgba(10,180,84,.34);
      animation: qrWhatsappPulse 2.4s ease-in-out infinite;
    }
    .qr-whatsapp-proof-btn::after {
      content: "";
      position: absolute;
      inset: -50% auto -50% -35%;
      width: 28%;
      transform: rotate(20deg);
      background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
      animation: qrWhatsappShine 3s ease-in-out infinite;
    }
    .qr-whatsapp-proof-btn:hover { transform: translateY(-3px) scale(1.01); }
    @keyframes qrWhatsappPulse {
      0%,100% { box-shadow: 0 0 0 3px rgba(51,255,130,.10), 0 14px 34px rgba(10,180,84,.28); }
      50% { box-shadow: 0 0 0 6px rgba(51,255,130,.16), 0 18px 44px rgba(10,180,84,.42); }
    }
    @keyframes qrWhatsappShine {
      0%, 60% { left: -40%; }
      82%, 100% { left: 125%; }
    }

    .qr-prize-gate {
      overflow: hidden;
      padding: 0;
      border: 1px solid rgba(255,199,44,.75);
      background: linear-gradient(180deg, #075732 0%, #043e25 100%);
      box-shadow: 0 18px 40px rgba(4,71,42,.18);
    }

    .qr-prize-ribbon {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      min-height: 38px;
      padding: 8px 14px;
      color: #172219;
      background: linear-gradient(90deg, #ffbd13 0%, #ffe16c 48%, #ffc72c 100%);
      font-family: "Montserrat", sans-serif;
      font-size: .78rem;
      font-weight: 900;
      letter-spacing: .03em;
      text-align: center;
    }

    .qr-prize-hero {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 16px;
      align-items: center;
      padding: 20px 20px 17px;
      color: #fff;
      background:
        radial-gradient(circle at 88% 35%, rgba(255,199,44,.2), transparent 34%),
        linear-gradient(135deg, #075732, #043e25);
    }

    .qr-prize-kicker {
      display: block;
      margin-bottom: 5px;
      color: rgba(255,255,255,.72);
      font-size: .68rem;
      font-weight: 900;
      letter-spacing: .1em;
    }

    .qr-prize-gate .qr-prize-hero h4 {
      display: block;
      margin: 0;
      color: #fff;
      font-family: "Montserrat", sans-serif;
      font-size: clamp(1.22rem, 2.2vw, 1.72rem);
      line-height: 1.05;
      letter-spacing: -.025em;
    }
    .qr-prize-gate .qr-prize-hero h4 strong {
      color: var(--yellow-500);
      font-size: 1.22em;
    }
    .qr-prize-gate .qr-prize-hero p {
      margin-top: 9px;
      color: rgba(255,255,255,.78);
      font-size: .78rem;
      line-height: 1.52;
    }

    .qr-prize-coin {
      width: 74px;
      height: 74px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      color: #5f4200;
      background: radial-gradient(circle at 35% 30%, #fff4a8 0%, #ffd13d 34%, #f5a600 70%, #cc7d00 100%);
      border: 5px solid rgba(255,255,255,.54);
      box-shadow: 0 12px 30px rgba(255,193,7,.25), inset 0 0 0 3px rgba(111,70,0,.16);
      font-size: 2rem;
      transform: rotate(-7deg);
    }

    .qr-prize-steps {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1px;
      background: #dce6df;
      border-top: 1px solid rgba(255,255,255,.14);
      border-bottom: 1px solid #dce6df;
    }
    .qr-prize-step {
      min-width: 0;
      padding: 15px 12px 14px;
      color: var(--ink);
      background: #fff;
      text-align: center;
    }
    .qr-prize-step-icon {
      width: 38px;
      height: 38px;
      display: grid;
      place-items: center;
      margin: 0 auto 7px;
      border-radius: 50%;
      color: #fff;
      background: var(--green-700);
      box-shadow: 0 7px 16px rgba(8,122,67,.18);
      font-size: 1rem;
    }
    .qr-prize-step strong {
      display: block;
      color: var(--green-950);
      font-size: .72rem;
      line-height: 1.25;
    }
    .qr-prize-step small {
      display: block;
      margin-top: 5px;
      color: #66756b;
      font-size: .66rem;
      line-height: 1.35;
    }

    .qr-proof-whatsapp {
      display: grid;
      grid-template-columns: auto 1fr auto;
      gap: 11px;
      align-items: center;
      margin: 14px;
      min-height: 62px;
      padding: 10px 14px;
      border-radius: 17px;
      color: #fff;
      background: linear-gradient(135deg, #0a8f42 0%, #18b95e 100%);
      box-shadow: 0 12px 28px rgba(18,185,94,.28);
      transition: transform .2s ease, box-shadow .2s ease;
    }
    .qr-proof-whatsapp:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(18,185,94,.36); }
    .qr-proof-whatsapp > i:first-child { font-size: 1.65rem; }
    .qr-proof-whatsapp > i:last-child { font-size: 1.05rem; }
    .qr-proof-whatsapp span { min-width: 0; }
    .qr-proof-whatsapp strong { display: block; font-size: .78rem; line-height: 1.25; }
    .qr-proof-whatsapp small { display: block; margin-top: 3px; color: rgba(255,255,255,.76); font-size: .68rem; }
    .qr-proof-unit-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 14px; }
    .qr-proof-unit-grid .qr-proof-whatsapp { margin: 0; }

    .qr-proof-warning {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 10px;
      align-items: start;
      margin: 0 14px 14px;
      padding: 11px 12px;
      border-radius: 14px;
      color: #fff;
      background: rgba(0,0,0,.22);
      border: 1px solid rgba(255,255,255,.10);
    }
    .qr-proof-warning > i { color: var(--yellow-500); font-size: 1.15rem; margin-top: 1px; }
    .qr-proof-warning strong { display: block; font-size: .76rem; }
    .qr-proof-warning span { display: block; margin-top: 2px; color: rgba(255,255,255,.66); font-size: .67rem; line-height: 1.4; }

    .qr-prize-gate .qr-os-choice-title {
      margin: 0;
      padding: 0 14px;
      color: rgba(255,255,255,.84);
      font-size: .76rem;
    }
    .qr-prize-gate .qr-app-buttons { margin: 9px 14px 14px; }
    .qr-prize-gate .qr-app-button { border: 1px solid rgba(255,255,255,.16); }

    @media (max-width: 560px) {
      .qr-prize-hero { grid-template-columns: 1fr; }
      .qr-prize-coin { display: none; }
      .qr-prize-steps { grid-template-columns: 1fr; }
      .qr-prize-step { display: grid; grid-template-columns: 42px 1fr; column-gap: 10px; text-align: left; align-items: center; }
      .qr-prize-step-icon { grid-row: 1 / span 2; margin: 0; }
      .qr-prize-step strong, .qr-prize-step small { grid-column: 2; }
      .qr-proof-whatsapp { grid-template-columns: auto 1fr; }
      .qr-proof-whatsapp > i:last-child { display: none; }
    }

    .app-choice-modal {
      position: fixed;
      inset: 0;
      z-index: 10020;
      display: none;
      place-items: center;
      padding: 18px;
    }

    .app-choice-modal.show { display: grid; }

    .app-choice-backdrop {
      position: absolute;
      inset: 0;
      background: rgba(4, 20, 12, .76);
      backdrop-filter: blur(8px);
    }

    .app-choice-panel {
      position: relative;
      z-index: 1;
      width: min(100%, 470px);
      padding: 28px;
      border-radius: 28px;
      background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(246,250,247,.98));
      box-shadow: 0 28px 60px rgba(4, 38, 22, .28);
      border: 1px solid rgba(10, 94, 52, .12);
    }

    .app-choice-close {
      position: absolute;
      top: 12px;
      right: 12px;
      width: 40px;
      height: 40px;
      border: 0;
      border-radius: 999px;
      background: rgba(6, 71, 42, .08);
      color: var(--green-900);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      font-size: 1rem;
    }

    .app-choice-title {
      margin: 0;
      color: var(--green-900);
      font-size: clamp(1.5rem, 4vw, 2rem);
    }

    .app-choice-text {
      margin: 12px 0 0;
      color: var(--slate-500);
      line-height: 1.65;
    }

    .app-choice-badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin: 0 0 14px;
      padding: 8px 12px;
      border-radius: 999px;
      background: rgba(255, 199, 44, .18);
      color: #7a5a00;
      font-size: .82rem;
      font-weight: 800;
    }

    .app-choice-buttons {
      display: grid;
      gap: 12px;
      margin-top: 22px;
    }

    .app-choice-btn {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 15px 18px;
      border-radius: 18px;
      text-decoration: none;
      color: #fff;
      background: linear-gradient(135deg, #063b24, #0b874c);
      box-shadow: 0 16px 28px rgba(4, 72, 39, .18);
    }

    .app-choice-btn i {
      font-size: 1.85rem;
      flex: 0 0 auto;
    }

    .app-choice-btn span {
      display: block;
      line-height: 1.25;
    }

    .app-choice-btn small {
      display: block;
      font-size: .72rem;
      opacity: .84;
      text-transform: uppercase;
      letter-spacing: .08em;
    }

    .app-choice-btn strong {
      display: block;
      font-size: 1.02rem;
    }

    .app-choice-note {
      margin: 16px 0 0;
      color: var(--slate-500);
      font-size: .92rem;
      line-height: 1.6;
    }

    .fictur-prize-card {
      position: relative;
      padding: 30px;
      border-radius: 26px;
      background:
        radial-gradient(circle at top right, rgba(255, 210, 76, .18) 0%, rgba(255, 210, 76, 0) 28%),
        radial-gradient(circle at bottom left, rgba(115, 255, 172, .14) 0%, rgba(115, 255, 172, 0) 26%),
        linear-gradient(135deg, #06492b 0%, #0a6a3d 52%, #0d7f47 100%);
      color: #fff;
      overflow: hidden;
      box-shadow: 0 24px 54px rgba(4,58,31,.22);
      border: 1px solid rgba(255,255,255,.09);
      isolation: isolate;
    }

    .fictur-prize-card::before {
      content: '';
      position: absolute;
      inset: 0;
      background:
        linear-gradient(120deg, rgba(255,255,255,.07), transparent 34%),
        repeating-linear-gradient(135deg, rgba(255,255,255,.045) 0 2px, transparent 2px 16px);
      opacity: .45;
      z-index: -2;
    }

    .fictur-prize-card::after {
      content: '';
      position: absolute;
      top: -34px;
      right: -18px;
      width: 190px;
      height: 190px;
      border-radius: 38px;
      background:
        radial-gradient(circle at 35% 35%, rgba(255,255,255,.34), rgba(255,255,255,.08) 42%, rgba(255,255,255,0) 68%),
        linear-gradient(160deg, rgba(255,255,255,.14), rgba(255,255,255,.04));
      border: 1px solid rgba(255,255,255,.12);
      transform: rotate(14deg);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
      z-index: -1;
    }

    .fictur-prize-tag {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 8px 14px;
      border-radius: 999px;
      background: rgba(255, 203, 61, .96);
      color: #183323;
      font-size: .74rem;
      font-weight: 900;
      letter-spacing: .08em;
      text-transform: uppercase;
      box-shadow: 0 10px 22px rgba(255, 203, 61, .22);
    }

    .fictur-prize-amount {
      position: relative;
      margin-top: 18px;
      font-family: 'Montserrat',sans-serif;
      font-size: clamp(2.2rem, 5vw, 3.35rem);
      font-weight: 900;
      line-height: .98;
      letter-spacing: -0.03em;
      color: #fff;
      text-shadow: 0 8px 22px rgba(0,0,0,.14);
      max-width: 10ch;
    }

    .fictur-prize-caption {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      margin-top: 14px;
      padding: 10px 14px;
      border-radius: 15px;
      background: rgba(255,255,255,.10);
      backdrop-filter: blur(8px);
      font-size: 1rem;
      font-weight: 800;
      color: #fff2b5;
      border: 1px solid rgba(255,255,255,.08);
    }

    .fictur-prize-caption::before {
      content: '';
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #ffd55b;
      box-shadow: 0 0 0 6px rgba(255, 213, 91, .15);
      flex: 0 0 auto;
    }

    .fictur-prize-copy {
      margin: 18px 0 0;
      color: rgba(255,255,255,.92);
      line-height: 1.72;
      max-width: 28rem;
      font-size: .98rem;
    }

    .fictur-prize-copy strong {
      color: #fff2b5;
      font-weight: 800;
    }

    @media (max-width: 560px) {
      .app-choice-panel { padding: 22px 18px; border-radius: 24px; }
      .fictur-prize-card { padding: 24px; border-radius: 22px; }
      .fictur-prize-card::after {
        width: 126px;
        height: 126px;
        top: -18px;
        right: -22px;
        border-radius: 28px;
      }
      .fictur-prize-amount { max-width: none; }
      .fictur-prize-caption { font-size: .94rem; padding: 9px 12px; }
      .fictur-prize-copy { max-width: none; font-size: .94rem; }
    }

    .whatsapp-choice-trigger { cursor: pointer; }

    /* Seletor de WhatsApp das lojas */
    .whatsapp-choice-modal {
      position: fixed;
      inset: 0;
      z-index: 10040;
      display: none;
      place-items: center;
      padding: 18px;
    }

    .whatsapp-choice-modal.show { display: grid; }

    .whatsapp-choice-backdrop {
      position: absolute;
      inset: 0;
      background: rgba(2, 24, 13, .80);
      backdrop-filter: blur(9px);
    }

    .whatsapp-choice-panel {
      position: relative;
      z-index: 1;
      width: min(100%, 500px);
      padding: 30px;
      border-radius: 30px;
      background: linear-gradient(180deg, #ffffff 0%, #f5fbf7 100%);
      box-shadow: 0 32px 90px rgba(0,0,0,.34);
      border: 1px solid rgba(8, 122, 67, .12);
      overflow: hidden;
    }

    .whatsapp-choice-panel::before {
      content: '';
      position: absolute;
      width: 180px;
      height: 180px;
      border-radius: 50%;
      right: -70px;
      top: -75px;
      background: radial-gradient(circle, rgba(37,211,102,.20), rgba(37,211,102,0) 70%);
      pointer-events: none;
    }

    .whatsapp-choice-close {
      position: absolute;
      z-index: 2;
      top: 14px;
      right: 14px;
      width: 42px;
      height: 42px;
      border: 0;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: rgba(5, 69, 40, .08);
      color: #06472a;
      font-size: 1.05rem;
      cursor: pointer;
    }

    .whatsapp-choice-kicker {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 8px 12px;
      border-radius: 999px;
      background: rgba(37, 211, 102, .12);
      color: #087a43;
      font-weight: 900;
      font-size: .76rem;
      letter-spacing: .05em;
      text-transform: uppercase;
    }

    .whatsapp-choice-title {
      margin: 16px 48px 0 0;
      font-family: 'Montserrat', sans-serif;
      color: #052e1d;
      font-size: clamp(1.65rem, 5vw, 2.25rem);
      line-height: 1.08;
    }

    .whatsapp-choice-text {
      margin: 12px 0 0;
      color: #66756d;
      line-height: 1.65;
    }

    .whatsapp-store-options {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 13px;
      margin-top: 24px;
    }

    .whatsapp-store-option {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 8px;
      min-height: 150px;
      padding: 19px;
      border-radius: 22px;
      text-decoration: none;
      color: #fff;
      background: linear-gradient(145deg, #075f38, #0a9a55);
      box-shadow: 0 16px 32px rgba(8, 122, 67, .18);
      border: 1px solid rgba(255,255,255,.16);
      transition: transform .2s ease, box-shadow .2s ease;
    }

    .whatsapp-store-option:hover {
      transform: translateY(-3px);
      box-shadow: 0 20px 38px rgba(8, 122, 67, .25);
    }

    .whatsapp-store-option .store-icon {
      width: 44px;
      height: 44px;
      border-radius: 14px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: rgba(255,255,255,.16);
      font-size: 1.35rem;
    }

    .whatsapp-store-option strong {
      font-size: 1.12rem;
      line-height: 1.2;
    }

    .whatsapp-store-option small {
      color: rgba(255,255,255,.78);
      line-height: 1.45;
      font-size: .82rem;
    }

    .whatsapp-store-option .store-go {
      margin-top: auto;
      display: inline-flex;
      align-items: center;
      gap: 7px;
      font-size: .82rem;
      font-weight: 800;
      color: #ffdf6a;
    }

    .whatsapp-choice-footnote {
      display: flex;
      gap: 9px;
      align-items: flex-start;
      margin: 18px 0 0;
      color: #6c786f;
      font-size: .82rem;
      line-height: 1.55;
    }

    .whatsapp-choice-footnote i { color: #0a9a55; margin-top: 2px; }

    @media (max-width: 560px) {
      .whatsapp-choice-panel { padding: 24px 18px 20px; border-radius: 25px; }
      .whatsapp-store-options { grid-template-columns: 1fr; }
      .whatsapp-store-option { min-height: 128px; }
    }

    /* Scanner de QR Code dentro do site */
    .qr-scanner-modal {
      position: fixed;
      inset: 0;
      z-index: 9999;
      display: none;
      place-items: center;
      padding: 18px;
    }

    .qr-scanner-modal.show { display: grid; }

    .qr-scanner-backdrop {
      position: absolute;
      inset: 0;
      background: rgba(2, 18, 11, .82);
      backdrop-filter: blur(8px);
    }

    .qr-scanner-panel {
      position: relative;
      width: min(100%, 520px);
      max-height: calc(100dvh - 28px);
      overflow: auto;
      padding: 20px;
      border-radius: 28px;
      background: #fff;
      box-shadow: 0 30px 100px rgba(0,0,0,.38);
    }

    .qr-scanner-top {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 14px;
      align-items: start;
      margin-bottom: 16px;
    }

    .qr-scanner-kicker {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      color: var(--green-700);
      font-size: .76rem;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: .08em;
    }

    .qr-scanner-top h3 {
      margin: 7px 0 5px;
      color: var(--green-950);
      font-family: "Montserrat", sans-serif;
      font-size: 1.25rem;
    }

    .qr-scanner-top p {
      margin: 0;
      color: var(--muted);
      font-size: .82rem;
      line-height: 1.5;
    }

    .qr-scanner-close {
      width: 42px;
      height: 42px;
      display: grid;
      place-items: center;
      border: 0;
      border-radius: 50%;
      color: var(--green-950);
      background: var(--green-100);
      font-size: 1rem;
    }

    .qr-reader-shell {
      position: relative;
      overflow: hidden;
      min-height: 300px;
      border-radius: 22px;
      background: #07150e;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
    }

    #qrReader { width: 100%; min-height: 300px; }
    #qrReader video { width: 100% !important; min-height: 300px; object-fit: cover; border-radius: 22px; }
    #qrReader img { display: none !important; }
    #qrReader__dashboard { display: none !important; }
    #qrReader__scan_region { min-height: 300px !important; }

    .qr-reader-corners {
      pointer-events: none;
      position: absolute;
      inset: 50% auto auto 50%;
      width: min(68vw, 230px);
      height: min(68vw, 230px);
      transform: translate(-50%, -50%);
      border: 3px solid rgba(255,199,44,.95);
      border-radius: 20px;
      box-shadow: 0 0 0 999px rgba(0,0,0,.18);
    }

    .qr-scanner-status {
      display: flex;
      align-items: flex-start;
      gap: 9px;
      margin-top: 14px;
      padding: 12px 14px;
      border-radius: 15px;
      color: #31513f;
      background: var(--green-50);
      font-size: .8rem;
      line-height: 1.45;
    }

    .qr-scanner-status.success { color: #075c34; background: #dff7e9; font-weight: 800; }
    .qr-scanner-status.error { color: #8a2c1e; background: #fff0ed; }
    .qr-scanner-cancel { width: 100%; margin-top: 12px; }

    .qr-native-camera-input {
      position: absolute !important;
      width: 1px !important;
      height: 1px !important;
      padding: 0 !important;
      margin: -1px !important;
      overflow: hidden !important;
      clip: rect(0, 0, 0, 0) !important;
      white-space: nowrap !important;
      border: 0 !important;
      opacity: 0 !important;
      pointer-events: none !important;
    }
    #qrOpenCameraLabel { cursor: pointer; user-select: none; }
    #qrOpenCameraLabel:focus-visible { outline: 3px solid var(--yellow-500); outline-offset: 3px; }

    body.qr-camera-open { overflow: hidden; }

    @media (max-width: 560px) {
      .qr-scanner-modal { padding: 10px; }
      .qr-scanner-panel { padding: 15px; border-radius: 23px; }
      .qr-reader-shell, #qrReader, #qrReader__scan_region, #qrReader video { min-height: 340px !important; }
      .qr-reader-corners { width: 235px; height: 235px; }
    }

    .qr-tech-note {
      margin-top: 13px;
      padding-top: 13px;
      border-top: 1px solid rgba(115,95,37,.13);
      color: #8a7a4f;
      font-size: .7rem;
      line-height: 1.45;
    }

    .qr-scan-highlight {
      animation: qrHighlight 1.2s ease 2;
    }

    @keyframes qrHighlight {
      0%, 100% { box-shadow: 0 34px 90px rgba(0,0,0,.24); }
      50% { box-shadow: 0 0 0 8px rgba(255,199,44,.24), 0 34px 90px rgba(0,0,0,.24); }
    }

    @media (max-width: 1040px) {
      .qr-hunt-grid { grid-template-columns: 1fr; }
      .qr-game-card { max-width: 680px; }
    }

    @media (max-width: 760px) {
      .qr-hunt-section { padding: 72px 0; }
      .qr-hunt-grid { gap: 30px; }
      .qr-hunt-steps { grid-template-columns: 1fr; }
      .qr-hunt-step { min-height: 0; }
      .qr-game-card { padding: 21px; border-radius: 25px; }
      .qr-app-buttons { grid-template-columns: 1fr; }
      .qr-proof-unit-grid { grid-template-columns: 1fr; }
      .qr-hunt-actions { display: grid; grid-template-columns: 1fr; }
      .qr-hunt-actions .btn { width: 100%; }
    }
  

/* ===== BLOCO CSS 3 ===== */

  html, body {
    -webkit-touch-callout: none;
  }
  body {
    -webkit-user-select: none;
    user-select: none;
  }
  input, textarea, select, option, [contenteditable="true"] {
    -webkit-user-select: text !important;
    user-select: text !important;
  }
  img, picture, svg {
    -webkit-user-drag: none;
    user-drag: none;
  }


    /* =========================================================
       CABEÇALHO DESKTOP — SEM FAIXA BRANCA
       ========================================================= */
    @media (min-width: 761px) {
      .header,
      .header.scrolled {
        background: rgba(5,46,29,.96) !important;
        -webkit-backdrop-filter: blur(14px);
        backdrop-filter: blur(14px);
        border-bottom: 1px solid rgba(255,255,255,.08) !important;
        box-shadow: 0 5px 20px rgba(0,0,0,.12) !important;
      }
      .nav {
        height: 68px;
      }
      .brand-image {
        width: 126px;
        height: 48px;
        padding: 3px 8px;
        border-radius: 12px;
        box-shadow: none;
      }
      .menu a:not(.btn),
      .header.scrolled .menu a:not(.btn) {
        color: rgba(255,255,255,.94) !important;
      }
      .menu a:not(.btn):hover {
        color: var(--yellow-500) !important;
      }
    }


    /* =========================================================
       HERO MOBILE — FOTO MAIOR, MAIS ALTA E SEM FAIXAS LATERAIS
       ========================================================= */
    @media (max-width: 760px) {
      .hero-grid {
        padding-top: 66px !important;
      }
      .hero-card {
        width: 100vw !important;
        max-width: 100vw !important;
        margin-left: calc(50% - 50vw) !important;
        margin-right: calc(50% - 50vw) !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        overflow: hidden !important;
      }
      .hero-card img {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        aspect-ratio: 16 / 9 !important;
        object-fit: cover !important;
        object-position: center center !important;
        border-radius: 0 !important;
        background: transparent !important;
      }
    }
    @media (max-width: 390px) {
      .hero-grid {
        padding-top: 64px !important;
      }
    }

    /* =========================================================
       REFORÇO VISUAL NAS IMAGENS — MAIS MOVIMENTO E TRANSIÇÕES
       ========================================================= */
    @keyframes mana-kenburns-left {
      0%,100% { transform: scale(1.02) translate3d(0,0,0); }
      50% { transform: scale(1.085) translate3d(-10px,-6px,0); }
    }

    @keyframes mana-kenburns-right {
      0%,100% { transform: scale(1.02) translate3d(0,0,0); }
      50% { transform: scale(1.085) translate3d(10px,-6px,0); }
    }

    @keyframes mana-float-image {
      0%,100% { transform: scale(1.02) translate3d(0,0,0); }
      50% { transform: scale(1.06) translate3d(0,-8px,0); }
    }

    @keyframes mana-image-glow {
      0%,100% { opacity: .06; }
      50% { opacity: .18; }
    }

    /* As caixas de imagem ganham mais presença ao aparecer */
    .motion-ready .image-fx {
      transition:
        transform .55s cubic-bezier(.16,1,.3,1),
        box-shadow .55s ease,
        filter .45s ease !important;
    }

    .motion-ready .image-fx.image-visible {
      transform: translateY(0) scale(1);
      filter: none;
    }

    .motion-ready .image-fx.image-visible::after {
      display: block !important;
      opacity: .08;
      background:
        radial-gradient(circle at 12% 18%, rgba(255,255,255,.18), transparent 34%),
        linear-gradient(180deg, transparent 0%, rgba(8,122,67,.12) 100%);
      animation: mana-image-glow 4.8s ease-in-out infinite;
      pointer-events: none;
    }

    /* Toda imagem passa a ter movimento contínuo leve após entrar na tela */
    .motion-ready .image-fx.image-visible .animated-image {
      transform-origin: center center;
      will-change: transform, filter;
    }

    .motion-ready .image-fx.image-pan-left.image-visible .animated-image {
      animation: mana-kenburns-left 12s ease-in-out infinite;
    }

    .motion-ready .image-fx.image-pan-right.image-visible .animated-image {
      animation: mana-kenburns-right 12s ease-in-out infinite;
    }

    .motion-ready .image-fx.image-float-soft.image-visible .animated-image {
      animation: mana-float-image 7.2s ease-in-out infinite;
    }

    /* Hover mais evidente nas imagens e cards */
    .motion-ready .sector-card:hover .sector-image img,
    .motion-ready .gallery-item:hover img,
    .motion-ready .experience-image:hover img,
    .motion-ready .promo-image:hover img,
    .motion-ready .split-image:hover img,
    .motion-ready .hero-card:hover img,
    .motion-ready .app-card:hover img {
      transform: scale(1.1) !important;
      filter: saturate(1.12) contrast(1.04) brightness(1.03) !important;
    }

    .motion-ready .sector-card:hover .sector-image.image-fx::before,
    .motion-ready .gallery-item.image-fx:hover::before,
    .motion-ready .experience-image.image-fx:hover::before,
    .motion-ready .promo-image.image-fx:hover::before,
    .motion-ready .split-image.image-fx:hover::before,
    .motion-ready .hero-card.image-fx:hover::before,
    .motion-ready .app-card.image-fx:hover::before {
      opacity: .7 !important;
      animation-duration: 3.6s !important;
    }

    .motion-ready .sector-card:hover,
    .motion-ready .gallery-item:hover,
    .motion-ready .experience-image:hover,
    .motion-ready .promo-image:hover,
    .motion-ready .split-image:hover,
    .motion-ready .hero-card:hover,
    .motion-ready .app-card:hover {
      transform: translateY(-6px) !important;
      box-shadow: 0 26px 60px rgba(4,58,31,.18) !important;
    }

    /* No mobile mantém animado, mas leve */
    @media (max-width: 760px) {
      .motion-ready .image-fx.image-pan-left.image-visible .animated-image,
      .motion-ready .image-fx.image-pan-right.image-visible .animated-image {
        animation-duration: 15s !important;
      }

      .motion-ready .image-fx.image-float-soft.image-visible .animated-image {
        animation-duration: 8.8s !important;
      }

      .motion-ready .image-fx.image-visible::after {
        opacity: .06;
      }

      .motion-ready .sector-card:active .sector-image img,
      .motion-ready .gallery-item:active img,
      .motion-ready .experience-image:active img,
      .motion-ready .promo-image:active img,
      .motion-ready .split-image:active img,
      .motion-ready .hero-card:active img,
      .motion-ready .app-card:active img {
        transform: scale(1.06) !important;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .motion-ready .image-fx.image-pan-left.image-visible .animated-image,
      .motion-ready .image-fx.image-pan-right.image-visible .animated-image,
      .motion-ready .image-fx.image-float-soft.image-visible .animated-image,
      .motion-ready .image-fx.image-visible::after {
        animation: none !important;
      }
    }

  

/* ===== BLOCO CSS 4 ===== */

  /* Proteção adicional contra cópia casual, impressão e captura por seleção. */
  html, body {
    -webkit-touch-callout: none !important;
  }
  body, body *:not(input):not(textarea):not(select):not(option):not([contenteditable="true"]) {
    -webkit-user-select: none !important;
    user-select: none !important;
  }
  input, textarea, select, option, [contenteditable="true"] {
    -webkit-user-select: text !important;
    user-select: text !important;
  }
  img, picture, svg, video {
    -webkit-user-drag: none !important;
    user-drag: none !important;
  }
  @media print {
    html, body, body * {
      display: none !important;
      visibility: hidden !important;
    }
  }

/* Enquadramento específico solicitado para a foto do açougue:
   mostra mais a parte final/inferior da fotografia e impede o pan automático. */
.butcher-card-photo {
  object-fit: cover !important;
  object-position: center 75% !important;
  animation: none !important;
}