/* =========================================================
   TAPREVIEW — LANDING
   Construída a partir do PDF fornecido pelo cliente.
   ========================================================= */

:root{
  --navy:#10224f;
  --blue:#1a73e8;
  --green:#16a34a;
  --yellow:#fabb05;
  --bg:#f7f9fd;
}

*{box-sizing:border-box}

html{
  scroll-behavior:smooth;
  background:#fff;
}

body{
  margin:0;
  background:#fff;
  color:var(--navy);
  font-family:Inter,Arial,sans-serif;
  overflow-x:hidden;
}

img{
  display:block;
  width:100%;
  height:auto;
}

.tapreview-site{
  width:100%;
  max-width:100%;
  margin:0 auto;
  background:#fff;
}

.visual-section{
  position:relative;
  width:100%;
  overflow:hidden;
  line-height:0;
}

.visual-section img{
  width:100%;
  height:auto;
  user-select:none;
  -webkit-user-drag:none;
}

.hotspot{
  position:absolute;
  display:block;
  z-index:5;
  border-radius:999px;
  cursor:pointer;
  background:transparent;
  overflow:hidden;
  transition:transform .22s ease,background .22s ease,box-shadow .22s ease;
}

/* Animação visual sobre os botões que já estão dentro das artes */
.hotspot::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(110deg,transparent 25%,rgba(255,255,255,.34) 45%,transparent 65%);
  transform:translateX(-130%);
}

.hotspot:hover,
.hotspot:focus-visible{
  background:rgba(255,255,255,.04);
  transform:translateY(-2px);
  box-shadow:0 7px 18px rgba(16,34,79,.16);
  outline:none;
}

.hotspot:hover::after,
.hotspot:focus-visible::after{
  animation:buttonShine .65s ease-out;
}

.hotspot:active{
  transform:translateY(0) scale(.985);
}

@keyframes buttonShine{
  from{transform:translateX(-130%)}
  to{transform:translateX(130%)}
}

/* O PDF foi exportado em proporções de desktop.
   As posições são percentuais, então os botões acompanham
   a imagem quando a janela muda de tamanho. */

.hero-cta{
  /* Área exata sobre o botão verde “Escolha seu kit agora” da arte hero */
  left:6.1%;
  top:60.3%;
  width:32.0%;
  height:10.2%;
}

.hero-header-cta{
  right:3.5%;
  top:1.0%;
  width:8.8%;
  height:4.2%;
}

.use-cta{
  left:31.5%;
  bottom:6.0%;
  width:37%;
  height:7.5%;
}

.kit-button{
  /* Coordenadas reais dos botões dentro de kits.jpg */
  top:80.35%;
  height:5.6%;
}

.kit1{
  left:13.7%;
  width:20.45%;
}

.kit3{
  left:39.3%;
  top:79.55%;
  width:21.4%;
  height:5.15%;
}

.kit10{
  right:13.7%;
  width:20.45%;
}

/* Conteúdo semântico que não altera o visual */
.sr-only-content{
  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;
}

/* =========================================================
   FAQ — HTML real, para continuar funcionando no celular
   ========================================================= */

.faq-section{
  background:#fff;
  padding:42px 20px 48px;
}

.faq-wrap{
  width:min(1440px,100%);
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr .8fr 2fr;
  align-items:center;
  gap:38px;
}

.faq-intro{
  padding-left:5%;
}

.faq-kicker{
  display:inline-block;
  color:var(--blue);
  background:#eaf2ff;
  border-radius:999px;
  padding:7px 13px;
  font-size:11px;
  font-weight:800;
  letter-spacing:.08em;
}

.faq-intro h2{
  margin:12px 0 4px;
  color:var(--navy);
  font-family:Poppins,Inter,Arial,sans-serif;
  font-size:clamp(30px,3.2vw,48px);
  line-height:1.05;
  letter-spacing:-.04em;
}

.faq-intro p{
  margin:0 0 22px;
  color:#66738b;
  font-size:15px;
}

.support-button{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:8px;
  overflow:hidden;
  border:1px solid #9cc9ff;
  border-radius:9px;
  padding:13px 19px;
  color:var(--blue);
  font-weight:800;
  font-size:13px;
  text-decoration:none;
  transition:transform .22s ease,box-shadow .22s ease,background .22s ease;
}

.support-button::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(110deg,transparent 25%,rgba(255,255,255,.55) 45%,transparent 65%);
  transform:translateX(-130%);
}

.support-button:hover,
.support-button:focus-visible{
  transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(26,115,232,.16);
  background:#f5f9ff;
  outline:none;
}

.support-button:hover::after,
.support-button:focus-visible::after{
  animation:buttonShine .65s ease-out;
}

.support-button:active{
  transform:translateY(0) scale(.985);
}

.faq-product{
  display:flex;
  justify-content:center;
  align-items:center;
  overflow:hidden;
  border-radius:18px;
}

.faq-product img{
  width:130%;
  max-width:none;
  transform:translateX(-4%);
}

.faq-list{
  border-top:1px solid #dfe5ee;
}

.faq-list details{
  border-bottom:1px solid #dfe5ee;
}

.faq-list summary{
  list-style:none;
  cursor:pointer;
  padding:14px 4px;
  color:var(--navy);
  font-size:14px;
  font-weight:650;
  position:relative;
  padding-right:30px;
}

.faq-list summary::-webkit-details-marker{display:none}

.faq-list summary:after{
  content:"⌄";
  position:absolute;
  right:5px;
  top:11px;
  font-size:17px;
  transition:transform .18s ease;
}

.faq-list details[open] summary:after{
  transform:rotate(180deg);
}

.faq-list details p{
  margin:0;
  padding:0 35px 15px 4px;
  color:#66738b;
  font-size:12px;
  line-height:1.55;
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width:800px){

  .hero-cta{
    /* Mesma proporção do botão real da arte, para acompanhar o redimensionamento */
    left:6.1%;
    top:60.3%;
    width:32.0%;
    height:10.2%;
  }

  .hero-header-cta{
    right:4%;
    top:1%;
    width:16%;
    height:5%;
  }

  .use-cta{
    left:25%;
    width:50%;
    bottom:5%;
    height:8%;
  }

  .kit-button{
    top:80.35%;
    height:5.6%;
  }

  .kit1{
    left:13.7%;
    width:20.45%;
  }

  .kit3{
    left:39.3%;
    top:79.55%;
    width:21.4%;
    height:5.15%;
  }

  .kit10{
    right:13.7%;
    width:20.45%;
  }

  .faq-section{
    padding:28px 16px 38px;
  }

  .faq-wrap{
    grid-template-columns:1fr;
    gap:22px;
  }

  .faq-intro{
    padding:0;
  }

  .faq-product{
    max-height:230px;
  }

  .faq-product img{
    width:100%;
    transform:none;
  }

  .faq-list summary{
    font-size:13px;
  }
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hotspot{transition:none}
}

/* =========================================================
   TAPREVIEW — MOBILE RECONSTRUÍDO
   O desktop permanece intacto. No celular, as seções são
   elementos HTML/CSS reais para melhor nitidez e toque.
   ========================================================= */
.mobile-site{display:none}

@media (max-width:800px){
  .desktop-site{display:none}
  .mobile-site{display:block; width:100%; background:#fff; color:var(--navy); line-height:1.35}

  .mobile-header{display:flex; justify-content:center; padding:18px 20px 10px; background:#fff}
  .mobile-logo{width:145px; height:auto; object-fit:contain; border-radius:0}

  .mobile-hero{padding:34px 22px 26px; text-align:center; background:linear-gradient(180deg,#f5f9ff 0%,#fff 100%)}
  .mobile-badge,.mobile-kicker{display:inline-block; color:var(--blue); background:#eaf2ff; border-radius:999px; padding:7px 11px; font-size:10px; font-weight:800; letter-spacing:.07em}
  .mobile-hero h1{margin:17px 0 13px; font-family:Poppins,Inter,Arial,sans-serif; font-size:42px; line-height:.98; letter-spacing:-.055em}
  .mobile-hero h1 span{color:var(--blue)}
  .mobile-hero>p{margin:0 auto 22px; max-width:470px; color:#5f6f87; font-size:16px; line-height:1.5}

  .mobile-cta,.mobile-kit-button,.mobile-support{display:flex; align-items:center; justify-content:center; gap:12px; width:100%; min-height:54px; padding:14px 18px; border-radius:14px; text-decoration:none; font-weight:800; font-size:16px; color:#fff; background:var(--green); box-shadow:0 10px 25px rgba(22,163,74,.2); transition:transform .2s ease,box-shadow .2s ease,filter .2s ease}
  .mobile-cta span,.mobile-kit-button span{font-size:23px; line-height:1}
  .mobile-cta:hover,.mobile-kit-button:hover,.mobile-support:hover{transform:translateY(-2px); box-shadow:0 13px 28px rgba(16,34,79,.18); filter:saturate(1.08)}
  .mobile-cta:active,.mobile-kit-button:active,.mobile-support:active{transform:scale(.985)}

  .mobile-trust-mini{display:flex; flex-wrap:wrap; justify-content:center; gap:8px 14px; margin-top:17px; color:#5f6f87; font-size:11px; font-weight:650}
  .mobile-features{display:grid; grid-template-columns:repeat(2,1fr); gap:10px; padding:18px 16px; background:#fff}
  .mobile-features div{display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:86px; border:1px solid #e3e9f2; border-radius:16px; background:#fff; box-shadow:0 5px 18px rgba(16,34,79,.05); text-align:center}
  .mobile-features strong{font-size:23px; color:var(--blue); margin-bottom:4px}
  .mobile-features span{font-size:12px; color:#5f6f87; font-weight:650}

  .mobile-use{padding:48px 18px; background:#f7f9fd; text-align:center}
  .mobile-use h2,.mobile-kits h2,.mobile-final-cta h2,.mobile-faq h2{margin:13px 0 8px; font-family:Poppins,Inter,Arial,sans-serif; font-size:31px; line-height:1.05; letter-spacing:-.045em}
  .mobile-use>p,.mobile-kits>p,.mobile-final-cta>p,.mobile-faq>p{margin:0 auto 25px; color:#66738b; font-size:14px; line-height:1.55; max-width:520px}
  .mobile-use-grid{display:grid; grid-template-columns:1fr 1fr; gap:11px; text-align:left}
  .mobile-use-grid article{padding:16px 13px; border:1px solid #e0e7f0; border-radius:16px; background:#fff; box-shadow:0 5px 16px rgba(16,34,79,.04)}
  .mobile-use-grid b{display:flex; align-items:center; justify-content:center; width:34px; height:34px; margin-bottom:9px; border-radius:10px; background:#eaf2ff; color:var(--blue); font-size:18px}
  .mobile-use-grid h3{margin:0 0 4px; font-size:14px; line-height:1.15}
  .mobile-use-grid p{margin:0; color:#6c7890; font-size:11px; line-height:1.4}

  .mobile-kits{padding:48px 16px; background:#fff; text-align:center}
  .mobile-kit{position:relative; margin:0 auto 16px; padding:24px 20px 20px; max-width:520px; border:1px solid #dfe6ef; border-radius:20px; background:#fff; box-shadow:0 8px 24px rgba(16,34,79,.07); text-align:left}
  .mobile-kit.featured{border:2px solid var(--blue); box-shadow:0 12px 30px rgba(26,115,232,.14)}
  .mobile-kit.featured:before{content:"MAIS ESCOLHIDO"; position:absolute; left:-2px; right:-2px; top:-2px; padding:8px; border-radius:18px 18px 0 0; background:var(--blue); color:#fff; text-align:center; font-size:10px; font-weight:900; letter-spacing:.08em}
  .mobile-kit.featured .kit-label{margin-top:26px}
  .kit-label{display:inline-block; margin-bottom:7px; color:var(--blue); font-size:10px; font-weight:900; letter-spacing:.08em}
  .mobile-kit h3{margin:0; font-family:Poppins,Inter,Arial,sans-serif; font-size:29px; line-height:1.05; text-transform:uppercase; letter-spacing:-.035em}
  .kit-description{min-height:38px; margin:7px 0 12px; color:#66738b; font-size:13px}
  .mobile-kit ul{list-style:none; padding:0; margin:0 0 17px; display:grid; gap:8px}
  .mobile-kit li{position:relative; padding-left:23px; color:#394762; font-size:13px}
  .mobile-kit li:before{content:"✓"; position:absolute; left:0; top:0; color:var(--green); font-weight:900}
  .kit-price{display:block; font-family:Poppins,Inter,Arial,sans-serif; font-size:31px; letter-spacing:-.04em}
  .mobile-kit small{display:block; margin:1px 0 15px; color:#66738b; font-size:12px}
  .mobile-kit-button{min-height:50px; background:var(--blue); font-size:15px}
  .mobile-kit-button.green{background:var(--green); box-shadow:0 10px 25px rgba(22,163,74,.18)}

  .mobile-final-cta{padding:48px 20px; background:linear-gradient(180deg,#f2f7ff,#fff); text-align:center}
  .mobile-final-cta .mobile-cta{max-width:500px; margin:0 auto}

  .mobile-faq{padding:42px 18px; background:#fff}
  .mobile-faq .faq-list{margin-top:20px}
  .mobile-faq .faq-list summary{padding:17px 30px 17px 2px; font-size:14px}
  .mobile-faq .faq-list details p{font-size:12px; padding:0 25px 16px 2px}
  .mobile-support{margin-top:20px; background:#fff; color:var(--blue); border:1px solid #9cc9ff; box-shadow:none}

  .mobile-footer{padding:34px 20px 30px; background:#10224f; color:#fff; text-align:center}
  .mobile-footer .mobile-logo{width:135px; margin:0 auto 12px; filter:brightness(0) invert(1)}
  .mobile-footer p{margin:0 0 14px; color:#dce6f7; font-size:13px}
  .mobile-footer small{color:#aebbd1; font-size:10px}
}

@media (max-width:390px){
  .mobile-hero h1{font-size:37px}
  .mobile-use-grid{grid-template-columns:1fr}
  .mobile-kit{padding-left:17px; padding-right:17px}
}

/* =========================================================
   MOBILE V8 — hero mais visual e página mais compacta
   Desktop não é alterado.
   ========================================================= */
@media (max-width:800px){
  .mobile-hero{
    padding:28px 20px 22px;
  }
  .mobile-hero h1{
    margin-top:14px;
    margin-bottom:10px;
  }
  .mobile-hero>p{
    margin-bottom:16px;
    font-size:15px;
  }
  .mobile-product-shot{
    width:min(230px,72vw);
    margin:2px auto 12px;
    border-radius:22px;
    box-shadow:0 14px 30px rgba(16,34,79,.12);
  }
  .mobile-hero .mobile-cta{
    min-height:50px;
  }
  .mobile-trust-mini{
    margin-top:13px;
    gap:6px 11px;
    font-size:10px;
  }

  .mobile-features{
    gap:8px;
    padding:14px 14px;
  }
  .mobile-features div{
    min-height:72px;
    border-radius:13px;
  }
  .mobile-features strong{
    font-size:20px;
  }
  .mobile-features span{
    font-size:11px;
  }

  .mobile-use{
    padding:34px 16px 32px;
  }
  .mobile-use h2,.mobile-kits h2,.mobile-final-cta h2,.mobile-faq h2{
    font-size:28px;
  }
  .mobile-use>p,.mobile-kits>p,.mobile-final-cta>p,.mobile-faq>p{
    margin-bottom:18px;
    font-size:13px;
  }
  .mobile-use-grid{
    gap:8px;
  }
  .mobile-use-grid article{
    padding:12px 11px;
    border-radius:13px;
  }
  .mobile-use-grid b{
    width:30px;
    height:30px;
    margin-bottom:7px;
    font-size:16px;
  }
  .mobile-use-grid h3{
    font-size:13px;
  }
  .mobile-use-grid p{
    font-size:10px;
  }

  .mobile-kits{
    padding:34px 14px 28px;
  }
  .mobile-kit{
    margin-bottom:12px;
    padding:20px 17px 17px;
    border-radius:17px;
  }
  .mobile-kit h3{
    font-size:27px;
  }
  .kit-description{
    min-height:0;
    margin:5px 0 10px;
  }
  .mobile-kit ul{
    gap:6px;
    margin-bottom:13px;
  }
  .mobile-kit li{
    font-size:12px;
  }
  .kit-price{
    font-size:29px;
  }
  .mobile-kit small{
    margin-bottom:12px;
  }
  .mobile-kit-button{
    min-height:48px;
  }

  /* CTA final duplicava a oferta; removemos no mobile para encurtar a jornada. */
  .mobile-final-cta{
    display:none;
  }

  .mobile-faq{
    padding:32px 16px 34px;
  }
  .mobile-faq .faq-list summary{
    padding-top:14px;
    padding-bottom:14px;
    font-size:13px;
  }
  .mobile-footer{
    padding:28px 18px 24px;
  }
}

/* =========================================================
   MOBILE V9 — cartão 3D minimalista, sem imagem
   Desktop permanece inalterado.
   ========================================================= */
@media (max-width:800px){
  .mobile-card-3d-wrap{
    width:min(250px,68vw);
    height:190px;
    margin:4px auto 18px;
    perspective:900px;
    display:flex;
    align-items:center;
    justify-content:center;
  }

  .mobile-card-3d{
    position:relative;
    width:188px;
    height:118px;
    border-radius:18px;
    transform:rotate(-7deg) rotateX(5deg) rotateY(-14deg);
    transform-style:preserve-3d;
    overflow:hidden;
    background:
      radial-gradient(circle at 50% 45%, rgba(255,255,255,.98) 0 18%, transparent 18.5%),
      linear-gradient(135deg,#21a366 0 25%,#fbbc04 25% 51%,#ea4335 51% 75%,#1a73e8 75% 100%);
    box-shadow:
      18px 20px 30px rgba(20,33,61,.18),
      0 8px 14px rgba(20,33,61,.10),
      inset 0 0 0 1px rgba(255,255,255,.45);
  }

  .mobile-card-3d:before{
    content:"";
    position:absolute;
    inset:8px;
    border-radius:13px;
    background:rgba(255,255,255,.08);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.20);
  }

  .mobile-card-gloss{
    position:absolute;
    inset:-30% 25% 0 -10%;
    transform:rotate(18deg);
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.25),transparent);
    filter:blur(2px);
    pointer-events:none;
  }

  .mobile-card-nfc{
    position:absolute;
    top:14px;
    left:17px;
    color:#fff;
    font-size:18px;
    font-weight:800;
    letter-spacing:-7px;
    transform:rotate(-90deg);
    text-shadow:0 1px 2px rgba(0,0,0,.15);
  }

  .mobile-card-brand{
    position:absolute;
    left:18px;
    bottom:15px;
    color:#fff;
    font-size:16px;
    font-weight:800;
    letter-spacing:-.4px;
    text-shadow:0 1px 2px rgba(0,0,0,.18);
  }

  .mobile-card-google{
    position:absolute;
    right:10px;
    top:10px;
    width:72px;
    height:72px;
    border-radius:12px;
    background:rgba(255,255,255,.96);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    box-shadow:0 5px 12px rgba(20,33,61,.12);
    transform:translateZ(8px);
  }

  .mobile-card-google span{
    position:absolute;
    top:4px;
    left:7px;
    font-size:12px;
    font-weight:800;
    color:#4285f4;
  }

  .mobile-card-google small{
    margin-top:10px;
    font-size:4.7px;
    line-height:1;
    color:#4a4a4a;
  }

  .mobile-card-google strong{
    margin-top:2px;
    font-size:12px;
    line-height:1;
    font-weight:600;
    letter-spacing:-.4px;
    background:linear-gradient(90deg,#4285f4 0 25%,#ea4335 25% 50%,#fbbc05 50% 75%,#34a853 75%);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
  }

  .mobile-card-google i{
    margin-top:4px;
    color:#f4b400;
    font-style:normal;
    font-size:7px;
    letter-spacing:0;
  }
}

/* =========================================================
   MOBILE V10 — cartão realista em CSS + celular mostrando ação
   Desktop permanece completamente inalterado.
   ========================================================= */
@media (max-width:800px){
  .mobile-product-scene{
    position:relative;
    width:min(330px,92vw);
    height:205px;
    margin:2px auto 10px;
    perspective:1100px;
  }

  /* Cartão no formato horizontal, inspirado no cartão físico real */
  .mobile-card-horizontal{
    position:absolute;
    left:3%;
    bottom:14px;
    width:245px;
    height:150px;
    border-radius:19px;
    overflow:hidden;
    transform:rotate(-5deg) rotateX(3deg);
    transform-style:preserve-3d;
    background:
      linear-gradient(145deg, transparent 0 34%, rgba(234,67,53,.96) 34% 67%, transparent 67%),
      linear-gradient(35deg, #1a73e8 0 36%, transparent 36%),
      linear-gradient(125deg, #34a853 0 31%, #fbbc05 31% 61%, transparent 61%);
    box-shadow:18px 21px 30px rgba(20,33,61,.20), 0 7px 13px rgba(20,33,61,.10);
    z-index:2;
  }

  .mobile-card-horizontal:after{
    content:"";
    position:absolute;
    inset:0;
    border-radius:19px;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.45);
    pointer-events:none;
  }

  .mobile-card-sheen{
    position:absolute;
    width:95px;
    height:240px;
    left:52px;
    top:-42px;
    transform:rotate(28deg);
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.24),transparent);
    filter:blur(1px);
  }

  .mobile-card-contactless{
    position:absolute;
    left:17px;
    top:13px;
    color:white;
    font-size:17px;
    font-weight:900;
    letter-spacing:-7px;
    transform:rotate(-90deg);
    text-shadow:0 1px 2px rgba(0,0,0,.18);
    z-index:3;
  }

  .mobile-google-panel{
    position:absolute;
    left:62px;
    top:29px;
    width:150px;
    height:104px;
    border-radius:17px;
    background:rgba(255,255,255,.97);
    box-shadow:0 7px 15px rgba(20,33,61,.15);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    z-index:3;
  }

  .mobile-google-g{
    position:absolute;
    top:-22px;
    width:53px;
    height:53px;
    border-radius:50%;
    background:white;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:36px;
    font-weight:700;
    font-family:Arial,sans-serif;
    color:#4285f4;
    box-shadow:0 2px 7px rgba(20,33,61,.10);
  }

  .mobile-google-panel small{
    margin-top:15px;
    font-size:9px;
    color:#333;
    line-height:1;
  }

  .mobile-google-panel strong{
    margin-top:4px;
    font-family:Arial,sans-serif;
    font-size:25px;
    font-weight:500;
    letter-spacing:-1.5px;
    color:#4285f4;
  }

  .mobile-google-panel strong b{color:#4285f4}
  .mobile-google-panel i{
    margin-top:3px;
    font-size:10px;
    letter-spacing:1px;
    color:#f4b400;
    font-style:normal;
  }

  /* Celular levemente sobreposto, como se estivesse realizando a ação */
  .mobile-phone{
    position:absolute;
    right:1%;
    top:2px;
    width:104px;
    height:184px;
    padding:6px;
    border-radius:22px;
    background:#17191d;
    border:2px solid #30343a;
    box-shadow:12px 18px 28px rgba(20,33,61,.22);
    transform:rotate(8deg) translateZ(25px);
    z-index:4;
  }

  .mobile-phone:before{
    content:"";
    position:absolute;
    inset:3px;
    border-radius:18px;
    background:#08090b;
    z-index:0;
  }

  .mobile-phone-speaker{
    position:absolute;
    z-index:3;
    top:8px;
    left:50%;
    width:31px;
    height:5px;
    transform:translateX(-50%);
    border-radius:5px;
    background:#25282c;
  }

  .mobile-phone-screen{
    position:absolute;
    inset:10px 7px 7px;
    border-radius:15px;
    overflow:hidden;
    background:linear-gradient(180deg,#fff 0%,#f7f9fc 100%);
    z-index:2;
    padding:19px 8px 8px;
    text-align:center;
  }

  .mobile-phone-google{
    font-size:9px;
    font-weight:700;
    color:#444;
    margin-bottom:13px;
  }

  .mobile-phone-google span{
    color:#4285f4;
    font-size:12px;
    margin-right:2px;
  }

  .mobile-phone-title{
    font-size:8px;
    color:#252525;
    font-weight:700;
    line-height:1.2;
  }

  .mobile-phone-stars{
    color:#f4b400;
    font-size:14px;
    letter-spacing:1px;
    margin:7px 0;
  }

  .mobile-phone-review-box{
    text-align:left;
    font-size:6px;
    color:#929292;
    border:1px solid #e2e5ea;
    background:white;
    border-radius:7px;
    padding:8px 5px;
    height:29px;
  }

  .mobile-phone-button{
    margin-top:8px;
    border-radius:7px;
    padding:5px 0;
    background:#1a73e8;
    color:white;
    font-size:7px;
    font-weight:700;
  }

  .mobile-nfc-waves{
    position:absolute;
    left:222px;
    bottom:82px;
    width:50px;
    height:50px;
    z-index:5;
    pointer-events:none;
  }

  .mobile-nfc-waves span{
    position:absolute;
    inset:5px;
    border:2px solid rgba(26,115,232,.38);
    border-left-color:transparent;
    border-bottom-color:transparent;
    border-radius:50%;
    transform:rotate(45deg);
    animation:tapreviewWave 1.8s ease-out infinite;
  }

  .mobile-nfc-waves span:nth-child(2){inset:13px;animation-delay:.35s}
  .mobile-nfc-waves span:nth-child(3){inset:21px;animation-delay:.7s}

  @keyframes tapreviewWave{
    0%{opacity:.05;transform:rotate(45deg) scale(.75)}
    35%{opacity:.75}
    100%{opacity:0;transform:rotate(45deg) scale(1.12)}
  }

  @media (max-width:390px){
    .mobile-product-scene{height:190px;width:94vw}
    .mobile-card-horizontal{width:222px;height:136px;left:0;bottom:12px}
    .mobile-google-panel{left:56px;top:27px;width:136px;height:94px}
    .mobile-google-panel strong{font-size:23px}
    .mobile-phone{width:94px;height:170px;right:0}
    .mobile-nfc-waves{left:198px;bottom:77px}
  }

  @media (prefers-reduced-motion:reduce){
    .mobile-nfc-waves span{animation:none;opacity:.25}
  }
}

/* =========================================================
   MOBILE V11 — imagem real da ação NFC
   Desktop permanece inalterado.
   ========================================================= */
@media (max-width:800px){
  .mobile-real-image{
    width:100%;
    height:auto;
    min-height:0;
    margin:2px auto 12px;
    display:flex;
    align-items:center;
    justify-content:center;
    perspective:none;
    overflow:visible;
  }

  .mobile-real-image img{
    display:block;
    width:min(100%, 390px);
    height:auto;
    max-height:255px;
    object-fit:contain;
    object-position:center;
    border:0;
    border-radius:0;
    box-shadow:none;
  }

  @media (max-width:390px){
    .mobile-real-image img{
      width:100%;
      max-height:230px;
    }
  }
}

/* MOBILE V12 — logo com fundo transparente no rodapé */
@media (max-width:800px){
  .mobile-footer .mobile-logo{
    display:block;
    width:min(190px,58vw);
    height:auto;
    object-fit:contain;
    background:transparent;
    mix-blend-mode:normal;
  }
}

/* MOBILE V13 — header proporcional + logo do rodapé colorido */
@media (max-width:800px){
  .mobile-header{
    padding:12px 16px 8px;
    min-height:64px;
    align-items:center;
  }

  .mobile-header .mobile-logo{
    width:min(205px,62vw);
    max-height:52px;
    object-fit:contain;
    filter:none !important;
    mix-blend-mode:normal;
  }

  .mobile-footer .mobile-logo{
    width:min(205px,64vw);
    max-height:58px;
    object-fit:contain;
    filter:none !important;
    mix-blend-mode:normal;
    background:transparent !important;
  }
}

@media (max-width:390px){
  .mobile-header .mobile-logo{
    width:min(195px,66vw);
  }
  .mobile-footer .mobile-logo{
    width:min(195px,66vw);
  }
}