/* ====== Fonte premium ====== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

:root{
  --green:#84d11b;
  --green-dark:#6fb315;

  --text:#0f172a;
  --muted:#475569;

  --bg:#f6f7f9;
  --card:#ffffff;
  --line:#e5e7eb;

  --radius:18px;
  --shadow: 0 12px 28px rgba(2, 6, 23, .08);

  --max: 1180px;

  /* Cores das bolinhas */
  --dot1:#2ecc71; /* verde */
  --dot2:#f1c40f; /* amarelo */
  --dot3:#e74c3c; /* vermelho */
  --dot4:#3498db; /* azul */
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:var(--bg);
  color:var(--text);
}

img{max-width:100%; display:block}
67a{text-decoration:none; color:inherit}

.container{
  max-width:var(--max);
  margin:0 auto;
  padding:0 22px;
}

/* ====== NAVBAR ====== */
.header{
  position:sticky;
  top:0;
  z-index:50;
  background:#ffffff;
  border-bottom:1px solid #e6e6e6;
}

.nav{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:14px 0;
}

.navLinks{
  display:flex;
  gap:20px;
  align-items:center;
  margin-left:auto;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
}

.logo{
  width:120px;      /* aumentamos aqui */
  height:auto;     /* deixa proporcional */
  border-radius:8px;
  object-fit:contain;
}

.nav{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:14px 0;
}
.navLinks a{
  color:#111827;
  font-weight:500;
  font-size:15px;
  opacity:.92;
}
.navLinks a:hover{opacity:1}

.navLinks a.ctaNav{
  background: linear-gradient(90deg, #e5f3c7, var(--green));
  padding:10px 18px;
  border-radius:10px;
  font-weight:800;
  box-shadow: 0 8px 18px rgba(132,209,27,.20);
}

/* Mobile menu */
.menuBtn{
  display:none;
  border:1px solid var(--line);
  background:#fff;
  border-radius:12px;
  padding:10px 12px;
  font-size:18px;
  cursor:pointer;
}
.mobileNav{
  border-top:1px solid var(--line);
  padding:8px 0 14px;
}
.mobileNav a{
  display:block;
  padding:10px 0;
  font-weight:700;
  color:#111827;
  opacity:.86;
}
.mobileNav a:hover{opacity:1}

/* ====== Util: bolinhas coloridas ====== */
.dots{
  display:flex;
  gap:10px;
  align-items:center;
  margin:0 0 18px;
}
.dots span{
  width:12px;
  height:4px;
  border-radius:999px;
  display:inline-block;
}
.dots span:nth-child(1){background:var(--dot1)}
.dots span:nth-child(2){background:var(--dot2)}
.dots span:nth-child(3){background:var(--dot3)}
.dots span:nth-child(4){background:var(--dot4)}

/* ====== Botões ====== */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:14px 22px;
  border-radius:10px;
  border:2px solid var(--green);
  font-weight:800;
  cursor:pointer;
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
  user-select:none;
}

.btn.primary{
  background:var(--green);
  color:#0b1220;
  border-color:var(--green);
  box-shadow: 0 10px 22px rgba(132,209,27,.25);
}
.btn.ghost{
  background:transparent;
  color:#0b1220;
}
.btn:hover{transform: translateY(-1px); opacity:.97}

/* ====== HERO ====== */
.hero{
  background: #f2f3f5;
  padding:20px 0 80px 0;
  border-bottom:1px solid rgba(0,0,0,.04);
}

.heroGrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  align-items:center;
  gap:42px;
}

.heroText{ position: relative; }

/* ✅ Aqui é onde você “abaixa” o título */
.heroText h1{
  font-size:56px;
  line-height:1.05;
  letter-spacing:-0.02em;
  margin:42px 0 16px;
}

.lead{
  font-size:16px;
  color:var(--muted);
  line-height:1.7;
  margin:0 0 28px;
  max-width:520px;
}

.heroActions{display:flex; gap:18px; flex-wrap:wrap;}

.heroTopLogo{
  grid-column: 1 / -1;
  display:flex;
  justify-content:center;
  margin-top:-10px;
  margin-bottom:-20px;
  position:relative;
  z-index:2;
}

.heroTopLogo img{
  width:520px;
  max-width:90%;
  height:120px;
  object-fit:cover;
  object-position:center;
}

.heroMedia{
  border-radius:22px;
  overflow:hidden;
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  box-shadow: var(--shadow);
}

/* ====== GALERIA ====== */
.gallery{
  padding:78px 0;
  background:#fff;
  border-top:1px solid rgba(0,0,0,.05);
}

.gallery h2{
  font-size:42px;
  margin:0 0 10px;
  letter-spacing:-0.02em;
}
.gallery p{
  color:var(--muted);
  line-height:1.7;
  margin:0 0 34px;
  max-width:720px;
}

.galleryGrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:22px;
}

.galleryGrid img{
  width:100%;
  height:320px;
  object-fit:cover;
  border-radius:18px;
  border:1px solid rgba(0,0,0,.08);
  box-shadow: 0 18px 40px rgba(2, 6, 23, .07);
  transition: transform .35s ease, box-shadow .35s ease;
}

.galleryGrid img:hover{
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 26px 60px rgba(2, 6, 23, .12);
}

/* ====== SEÇÃO ESCURA (lâmpada) ====== */
.section-dark{
  position:relative;
  padding:110px 0;
  color:#ffffff;

 background-image:
  linear-gradient(90deg,
    rgba(0, 0, 0, 0.85) 0%,
    rgba(0, 0, 0, 0.75) 50%,
    rgba(0, 0, 0, 0.55) 100%
  ),
  url("./assets/lampada.jpg");

  background-size:cover;
  background-position:center;
  background-attachment:fixed;
}

.section-dark .container{ max-width: 760px; }

.section-dark h2{
  font-size:48px;
  margin:0 0 14px;
  letter-spacing:-0.02em;
  color:#ffffff !important;
text-shadow: 0 4px 18px rgba(0,0,0,0.6);
}
.section-dark p{
  color:#ffffff;
  text-shadow: 0 2px 12px rgba(0,0,0,0.5);
  line-height:1.7;
  max-width:560px;
}

/* ====== Seções claras ====== */
.section{
  padding:78px 0;
  background:transparent;
}

.section h2{
  font-size:42px;
  margin:0 0 10px;
  letter-spacing:-0.02em;
}

.section p{
  color: var(--muted);
  line-height:1.7;
  margin:0 0 34px;
  max-width:720px;
}

/* ====== VIDEO ====== */
.videoWrap{ margin-top:50px; }

.videoBox{
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  overflow:hidden;
  box-shadow: var(--shadow);
}

.videoBox video{
  width:100%;
  aspect-ratio:16/9;
  background:#0b1220;
}

.videoHelp{
  background:#eaf1ff;
  padding:18px 18px;
  border-top:1px solid #d7e2ff;
}

.videoHelp h3{
  margin:0 0 10px;
  font-size:18px;
}
.videoHelp ul{
  margin:0;
  padding-left:18px;
  color:#334155;
  line-height:1.8;
}

/* ====== PRODUTOS ====== */
.products{ padding-top:70px; }

.grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:28px;
}

.card{
  background:var(--card);
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(0,0,0,.08);
  box-shadow: 0 18px 40px rgba(2, 6, 23, .07);
  transition: transform .18s ease, box-shadow .18s ease;
}

.card:hover{
  transform: translateY(-2px);
  box-shadow: 0 26px 60px rgba(2, 6, 23, .10);
}

.card img{
  width:100%;
  height:280px;
  object-fit:contain;
  padding:0;
}

.cardBody{ padding:22px 22px 20px; }

.badgeTop{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  font-weight:800;
  color:#0b1220;
  background:#dff2c1;
  border:1px solid rgba(132,209,27,.35);
  padding:6px 10px;
  border-radius:999px;
  margin-bottom:10px;
}

.cardBody h3{
  font-size:30px;
  margin:6px 0 8px;
  letter-spacing:-0.02em;
}

.cardBody p{ margin:0 0 18px; color:var(--muted); }

.cardBody .btn{
  width:100%;
  border:none;
  background:var(--green);
  color:#0b1220;
  box-shadow: 0 10px 22px rgba(132,209,27,.25);
}

/* CTA pequena abaixo dos produtos */
.smallCta{
  text-align:center;
  margin-top:38px;
  color:#334155;
}
.smallCta .btn{
  margin-top:14px;
  border:none;
  background:var(--green);
  color:#0b1220;
  box-shadow: 0 10px 22px rgba(132,209,27,.25);
}

/* ====== CONTATO ====== */
#contato{
  background: transparent; /* ou var(--bg) se quiser seguir o fundo do site */
  padding:86px 0;
}
.contactTitleTop{
  text-align:center;
  max-width:820px;
  margin:0 auto 40px;
}

.contactTitleTop h2{
  margin:0 0 10px;
  font-size:44px;
  letter-spacing:-0.02em;
}

.contactTitleTop p{
  margin:0;
  color:#334155;
  line-height:1.7;
}

.contactGrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:22px;
  max-width:900px;
  margin:0 auto;
}

.contactCard{
  background:#fff;
  border-radius:16px;
  padding:22px 22px;
  border:1px solid rgba(0,0,0,.08);
  box-shadow: var(--shadow);
  display:flex;
  gap:14px;
  align-items:center;
  transition: transform .16s ease;
}
.contactCard:hover{transform: translateY(-1px);}

.icon{
  width:44px;
  height:44px;
  border-radius:12px;
  display:grid;
  place-items:center;
  background:#f3f4f6;
  border:1px solid rgba(0,0,0,.06);
  font-size:20px;
}

.contactText .contactTitle{
  font-weight:900;
  font-size:18px;
  margin:0;
}
.contactText .contactValue{
  margin-top:6px;
  color:#475569;
  font-weight:600;
}

/* CTA verde grande */
.contactCta{
  max-width:880px;
  margin:48px auto 0;
  background: linear-gradient(90deg, #e3efd2, var(--green));
  border-radius:22px;
  padding:54px 30px;
  text-align:center;
  box-shadow: 0 18px 48px rgba(132,209,27,.18);
}

.contactCta h3{
  margin:0 0 10px;
  font-size:36px;
  letter-spacing:-0.02em;
}

.contactCta p{
  margin:0 0 26px;
  color:#0b1220;
  line-height:1.7;
}

.contactCta .btn{
  background:#fff;
  border:none;
  padding:14px 26px;
}

/* ====== FOOTER ====== */
.footer{
  background:#111;
  color:#fff;
  padding:64px 0 20px;
}

.footerGrid{
  display:grid;
  grid-template-columns: 1.1fr .8fr .8fr;
  gap:44px;
  align-items:start;
  margin-bottom:36px;
}

.footerBrand p{
  margin:10px 0 0;
  color:rgba(255,255,255,.70);
  line-height:1.7;
}

.footerCol h4{
  margin:0 0 14px;
  font-size:16px;
}
.footer a{
  display:block;
  color:rgba(255,255,255,.75);
  margin:10px 0;
  font-weight:600;
}
.footer a:hover{color:#fff}

.footerBottom{
  border-top:1px solid rgba(255, 255, 255, 0.14);
  padding-top:18px;
  display:flex;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  color:rgba(255,255,255,.70);
  font-weight:600;
}

/* ====== Animations (scroll reveal) ====== */
.reveal{
  opacity:0;
  transform: translateY(14px);
  transition: opacity .6s ease, transform .6s ease;
}
.reveal.show{
  opacity:1;
  transform: translateY(0);
}

.fade-left{
  opacity:0;
  transform: translateX(-60px);
  transition: opacity .8s ease, transform .8s ease;
  will-change: opacity, transform;
}
.fade-left.show{
  opacity:1;
  transform: translateX(0);
}

/* ====== Responsivo ====== */
@media (max-width: 980px){
  .heroGrid{grid-template-columns:1fr}
  .heroText h1{font-size:42px}
  .section-dark h2{font-size:36px}
  .grid{grid-template-columns:1fr}
  .contactGrid{grid-template-columns:1fr}
  .footerGrid{grid-template-columns:1fr}
  .navLinks{display:none}
  .menuBtn{display:inline-flex}

  .heroTopLogo{ margin-top:0; margin-bottom:-12px; }
  .heroTopLogo img{ width:420px; height:110px; }

  .galleryGrid{ grid-template-columns: 1fr; }
  .galleryGrid img{ height:260px; }
}
/* ===== Ícones redes sociais coloridos ===== */

.icon i{
  font-size:20px;
}

/* WhatsApp */
.fa-whatsapp{
  color:#25D366;
}

/* Instagram (gradiente fake simplificado) */
.fa-instagram{
  color:#E1306C;
}

/* TikTok */
.fa-tiktok{
  color:#000000;
}

/* Email */
.fa-envelope{
  color:#0072C6;
}
/* ===== Página Sobre ===== */
.pageHero{
  background:#f2f3f5;
  padding:64px 0 40px;
  border-bottom:1px solid rgba(0,0,0,.04);
}

.pageHero h1{
  font-size:54px;
  line-height:1.05;
  letter-spacing:-0.02em;
  margin:0 0 14px;
}

.aboutCards{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap:18px;
  margin-top:22px;
}

.aboutCard{
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:16px;
  padding:18px;
  box-shadow: var(--shadow);
}

.aboutCard h3{
  margin:0 0 8px;
  font-size:18px;
}

.aboutCard p{
  margin:0;
  color:var(--muted);
  line-height:1.6;
}

.activeNav{
  font-weight:900;
  opacity:1 !important;
}

@media (max-width: 980px){
  .aboutCards{ grid-template-columns: 1fr; }
  .pageHero h1{ font-size:40px; }
}
/* ===================== SOBRE (PAGE) ===================== */
.aboutHero{
  background: linear-gradient(180deg, #eef5ff 0%, #ffffff 70%);
  border-bottom:1px solid rgba(0,0,0,.06);
  padding:84px 0 64px;
}

.aboutHeroInner{ max-width: 980px; }

.aboutHero h1{
  font-size:54px;
  line-height:1.05;
  letter-spacing:-0.02em;
  margin:18px 0 14px;
}

.aboutHeroLead{
  color:var(--muted);
  line-height:1.8;
  margin:0;
  max-width:820px;
  font-size:16px;
}

.aboutSection{
  padding:78px 0;
  background:#fff;
}

.aboutAlt{
  background:#f3f6fb;
  border-top:1px solid rgba(0,0,0,.04);
  border-bottom:1px solid rgba(0,0,0,.04);
}

.aboutSection h2{
  font-size:40px;
  margin:0 0 12px;
  letter-spacing:-0.02em;
}

.aboutSection p{
  color:var(--muted);
  line-height:1.8;
  margin:0 0 14px;
  max-width:860px;
}

.aboutNote{
  margin-top:14px !important;
  max-width:860px;
}

.aboutChecks{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:18px 34px;
  margin:20px 0 10px;
  max-width: 860px;
}

.aboutChecks ul{
  margin:0;
  padding:0;
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:12px;
}

.aboutChecks li{
  display:flex;
  align-items:flex-start;
  gap:12px;
  color:#0f172a;
  line-height:1.6;
  font-weight:600;
}

.checkDot{
  width:20px;
  height:20px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#e9f7d4;
  border:1px solid rgba(132,209,27,.55);
  color:#2f6d00;
  font-weight:900;
  flex: 0 0 20px;
  margin-top:2px;
}

.aboutBullets{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px 34px;
  margin:16px 0 6px;
  max-width: 860px;
}

.aboutBullets ul{
  margin:0;
  padding-left:18px;
  color:#0f172a;
  line-height:1.9;
  font-weight:600;
}

.aboutClients{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:14px 16px;
  margin:26px 0 18px;
  max-width: 860px;
}

.clientPill{
  background:#fff;
  border:1px solid rgba(0,0,0,.12);
  border-radius:10px;
  padding:16px 18px;
  font-weight:800;
  text-align:center;
  box-shadow: 0 10px 24px rgba(2, 6, 23, .06);
}

.aboutWhy{
  margin:18px 0 16px;
  padding:0;
  list-style:none;
  max-width: 860px;
  display:flex;
  flex-direction:column;
  gap:12px;
}

.aboutWhy li{
  display:flex;
  align-items:flex-start;
  gap:12px;
  color:#0f172a;
  font-weight:700;
  line-height:1.6;
}

.aboutWhy li::before{
  content:"◆";
  color:#3b82f6;
  font-size:14px;
  line-height:1.4;
  margin-top:2px;
}

.aboutItalic{
  max-width:860px;
  font-style:italic;
  color:#475569;
  margin-top:14px !important;
}

.aboutCta{
  padding:88px 0;
  background: linear-gradient(90deg, #e7f5d2 0%, #84d11b 100%);
}

.aboutCtaInner{
  text-align:center;
  max-width: 920px;
}

.aboutCta h2{
  margin:0 0 10px;
  font-size:46px;
  letter-spacing:-0.02em;
  color:#0b1220;
}

.aboutCta p{
  margin:0 0 22px;
  color:#0b1220;
  font-weight:600;
  line-height:1.8;
}

.aboutCtaBtn{
  background:#fff !important;
  border:2px solid rgba(11,18,32,.2) !important;
  color:#0b1220 !important;
  padding:14px 26px !important;
  box-shadow: 0 14px 34px rgba(2, 6, 23, .10);
}

@media (max-width: 980px){
  .aboutHero{ padding:60px 0 44px; }
  .aboutHero h1{ font-size:40px; }
  .aboutChecks{ grid-template-columns:1fr; }
  .aboutBullets{ grid-template-columns:1fr; }
  .aboutClients{ grid-template-columns:1fr; }
  .aboutCta h2{ font-size:34px; }
}

/* ===== BOTÃO FLUTUANTE WHATSAPP (ÚNICO) ===== */
.whatsappFloat{
  position:fixed;
  right:24px;
  bottom:24px;
  width:64px;
  height:64px;
  border-radius:50%;
  background:#25D366;

  display:flex;
  align-items:center;
  justify-content:center;

  z-index:999;
  cursor:pointer;

  /* “apagado” (sem brilho forte) */
  box-shadow:
    0 10px 25px rgba(0,0,0,.20);

  transition: transform .35s ease, box-shadow .35s ease, filter .35s ease;
  animation: wppFade .45s ease both;
}

.whatsappFloat img{
  width:34px;
  height:34px;
  transition: transform .35s ease, filter .35s ease;
}

/* 💡 EFEITO LÂMPADA ACENDENDO (hover) */
.whatsappFloat:hover{
  transform: translateY(-3px) scale(1.08);
  filter: brightness(1.05);

  /* brilho “lâmpada” */
  box-shadow:
    0 0 10px rgba(255,255,255,.70),
    0 0 22px rgba(255,255,255,.45),
    0 0 55px rgba(37,211,102,.75),
    0 0 90px rgba(37,211,102,.45),
    0 14px 36px rgba(0,0,0,.22);
}

.whatsappFloat:hover img{
  transform: scale(1.08);
  filter: brightness(1.20);
}

/* entrada suave */
@keyframes wppFade{
  from{ opacity:0; transform: translateY(12px) scale(.95); }
  to{ opacity:1; transform: translateY(0) scale(1); }
}


/* Responsivo Marketplaces */
@media (max-width: 980px){
  .marketGrid{
    grid-template-columns: 1fr;
  }
}

/* ===== FAIXA (NETFLIX-LIKE) DE VÍDEOS ===== */
.rail{
  position: relative;
  margin-top: 18px;
}

.railViewport{
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,.10);
  box-shadow: 0 18px 40px rgba(2, 6, 23, .08);
  background: #0b1220;
}

.railTrack{
  display: flex;
  gap: 14px;
  padding: 14px;
  transform: translateX(0);
  transition: transform .45s ease;
  will-change: transform;
}

.railCard{
  flex: 0 0 320px;
  height: 180px;
  border-radius: 14px;
  overflow: hidden;
  background: #0b1220;
  border: 1px solid rgba(255,255,255,.10);
}

.railVideo{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #0b1220;
}

.railBtn{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.20);
  background: rgba(0,0,0,.35);
  color: #fff;
  font-size: 30px;
  cursor: pointer;
  display: grid;
  place-items: center;
  z-index: 3;
  transition: transform .2s ease, opacity .2s ease;
  opacity: .95;
}

.railBtn:hover{
  transform: translateY(-50%) scale(1.06);
}

.railBtn.prev{ left: 10px; }
.railBtn.next{ right: 10px; }

@media (max-width: 980px){
  .railCard{ flex-basis: 260px; height: 150px; }
}

@media (max-width: 520px){
  .railCard{ flex-basis: 220px; height: 130px; }
}

/* ====== FEEDBACKS ====== */
.feedback-section{
  padding: 100px 5%;
  background: #f1f3f5;
  text-align: center;
}

.feedback-container{
  display: flex;
  gap: 30px;
  justify-content: center;
  flex-wrap: wrap;
}

.feedback-card{
  background: #ffffff;
  width: 340px;
  padding: 35px;
  border-radius: 20px;
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 20px 40px rgba(0,0,0,0.10);
  transition: transform .4s ease, box-shadow .4s ease, opacity .4s ease;
  position: relative;
  overflow: hidden;

  opacity: 0;
  transform: translateY(60px);
}

.feedback-card.show{
  opacity: 1;
  transform: translateY(0);
}

.feedback-card:hover{
  transform: translateY(-12px);
  box-shadow: 0 30px 60px rgba(0,0,0,0.16);
}

.feedback-card::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 5px;
  width: 100%;
  background: linear-gradient(90deg, #00ff88, #00cc66);
}
/* FIX: logos dos marketplaces não podem herdar regras globais de img */
.marketCard .marketLogo{
  width: 54px !important;
  height: 54px !important;
  max-width: 54px !important;
  max-height: 54px !important;
  object-fit: contain !important;
  flex: 0 0 54px;
}

/* garante layout do card */
.marketCard{
  display: flex;
  align-items: center;
  gap: 18px;
}

.marketCard span{
  flex: 1;
}
/* ===== MARKETPLACES (estilo igual Contato) ===== */

.marketCard{
  text-decoration: none;
  color: #0b1220;
  background:#fff;
  border-radius:18px;
  padding:22px;
  display:flex;
  align-items:center;
  gap:16px;
  border:1px solid rgba(0,0,0,.08);
  box-shadow: 0 16px 36px rgba(2,6,23,.07);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.marketIcon{
  width:56px;
  height:56px;
  border-radius:16px;
  background:#f3f4f6;
  border:1px solid rgba(0,0,0,.06);
  display:grid;
  place-items:center;
  flex: 0 0 56px;
}

.marketCard .marketLogo{
  width:28px !important;
  height:28px !important;
  max-width:28px !important;
  max-height:28px !important;
  object-fit:contain !important;
  display:block;
}

.marketText{
  display:flex;
  flex-direction:column;
  line-height:1.1;
}

.marketText strong{
  font-size:18px;
  font-weight:800;
}

.marketText span{
  margin-top:6px;
  font-size:14px;
  color:#4b5563;
  font-weight:600;
}

/* Marketplaces usando o mesmo estilo do contato */
.icon img{
  width: 40px;
  height: 40px;
  object-fit: contain;
  display: block;
}

/* Marketplaces usando o mesmo estilo do contato (tamanho da logo no quadradinho) */
.icon img{
  width: 40px;
  height: 40px;
  object-fit: contain;
  display: block;
}

/* Hover: “saltinho” + acender (glow) com a cor de cada marketplace */
.contactCard{
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, filter .25s ease;
}

.contactCard.shopee{ --glow: 255, 87, 34; }  /* Shopee */
.contactCard.magalu{ --glow: 0, 102, 255; }  /* Magalu */
.contactCard.tiktok{ --glow: 0, 242, 234; }  /* TikTok */
.contactCard.ml{     --glow: 255, 206, 0; }  /* Mercado Livre */

.contactCard.shopee:hover,
.contactCard.magalu:hover,
.contactCard.tiktok:hover,
.contactCard.ml:hover{
  transform: translateY(-6px);
  border-color: rgba(var(--glow), .45);
  filter: brightness(1.02);
  box-shadow:
    0 18px 40px rgba(2,6,23,.12),
    0 0 0 4px rgba(var(--glow), .10),
    0 0 26px rgba(var(--glow), .28);
}

.contactCard.shopee:hover .icon,
.contactCard.magalu:hover .icon,
.contactCard.tiktok:hover .icon,
.contactCard.ml:hover .icon{
  border-color: rgba(var(--glow), .35);
  box-shadow:
    0 0 0 4px rgba(var(--glow), .10),
    0 0 18px rgba(var(--glow), .25);
  background: rgba(var(--glow), .06);
}

/* ===== FIX LINKS (tirar sublinhado e roxo) ===== */
a{
  text-decoration: none;
  color: inherit;
}

a:visited{
  color: inherit;
}

/* garante que dentro dos cards também não mude */
.contactCard, 
.contactCard:visited{
  color: inherit;
  text-decoration: none;
}

/* ===== CONTATOS - salto + glow por cor ===== */
.contactCard{
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, filter .25s ease;
  will-change: transform;
}

/* cores */
.contactCard.whatsapp{ --glow: 37, 211, 102; }   /* verde Whats */
.contactCard.instagram{ --glow: 225, 48, 108; }  /* rosa Insta */
.contactCard.tiktok{ --glow: 0, 242, 234; }      /* ciano TikTok */
.contactCard.email{ --glow: 0, 102, 204; }       /* azul Email */

/* hover */
.contactCard.whatsapp:hover,
.contactCard.instagram:hover,
.contactCard.tiktok:hover,
.contactCard.email:hover{
  transform: translateY(-6px);
  border-color: rgba(var(--glow), .45);
  filter: brightness(1.02);
  box-shadow:
    0 18px 40px rgba(2,6,23,.12),
    0 0 0 4px rgba(var(--glow), .10),
    0 0 26px rgba(var(--glow), .28);
}

/* glow no quadradinho do ícone */
.contactCard.whatsapp:hover .icon,
.contactCard.instagram:hover .icon,
.contactCard.tiktok:hover .icon,
.contactCard.email:hover .icon{
  border-color: rgba(var(--glow), .35);
  box-shadow:
    0 0 0 4px rgba(var(--glow), .10),
    0 0 18px rgba(var(--glow), .25);
  background: rgba(var(--glow), .06);
}

.videoHead{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:20px;
  margin-bottom:25px;
}

.videoCTA{
  padding:12px 18px;
  border-radius:14px;
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  font-weight:700;
  text-decoration:none;
  color:#0b1220;
  transition: transform .2s ease, box-shadow .2s ease;
}

.videoCTA:hover{
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0,0,0,.12);
}

.railCard:hover .railVideo{
  transform: scale(1.05);
}

.railVideo{
  transition: transform .4s ease;
}

/* ===== Degradê nas laterais (Netflix fade) ===== */
.railViewport{
  position: relative;
}

.railViewport::before,
.railViewport::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:70px;
  pointer-events:none;
  z-index:5;          /* fica acima dos vídeos/thumbs */
}

.railViewport::before{
  left:0;
  background: linear-gradient(90deg, rgba(11,18,32,1), rgba(11,18,32,0));
}

.railViewport::after{
  right:0;
  background: linear-gradient(270deg, rgba(11,18,32,1), rgba(11,18,32,0));
}

/* garante que o track fique abaixo do fade */
.railTrack{ position: relative; z-index:1; }

.railThumb{
  width:100%;
  height:100%;
  object-fit:cover;
  background:#fff;
  display:block;
}

.railViewport{
  position: relative;
}

.railViewport::before,
.railViewport::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:70px;
  pointer-events:none;
  z-index:5;
}

.railViewport::before{
  left:0;
  background: linear-gradient(90deg, #0b1220 0%, rgba(11,18,32,0) 100%);
}

.railViewport::after{
  right:0;
  background: linear-gradient(270deg, #0b1220 0%, rgba(11,18,32,0) 100%);
}
/* ===== Overlay do play em cima do thumb ===== */
/* ===== Overlay play em cima do thumb ===== */
.railCard{ position: relative; cursor:pointer; }

.railOverlay{
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:10px;
  opacity:0;
  transition: opacity .25s ease;
  background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,.40) 100%);
  z-index:2;
}
.railCard:hover .railOverlay{ opacity:1; }

.playBadge{
  width:54px; height:54px;
  border-radius:50%;
  display:grid; place-items:center;
  border:1px solid rgba(255,255,255,.30);
  background: rgba(0,0,0,.35);
  color:#fff; font-size:22px;
}
.playText{ color:#fff; font-weight:800; font-size:14px; }

/* ===== MODAL do vídeo ===== */
.videoModal{ position:fixed; inset:0; display:none; z-index:9999; }
.videoModal.open{ display:block; }
.videoModalBackdrop{ position:absolute; inset:0; background:rgba(0,0,0,.70); }

.videoModalBox{
  position:relative;
  width:min(980px,92vw);
  margin:7vh auto 0;
  border-radius:18px;
  overflow:hidden;
  background:#0b1220;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 30px 90px rgba(0,0,0,.55);
}

.videoModalClose{
  position:absolute; top:10px; right:10px;
  width:40px; height:40px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.15);
  background: rgba(0,0,0,.35);
  color:#fff; cursor:pointer; z-index:2;
}

.videoModalPlayer{ width:100%; aspect-ratio:16/9; background:#000; }
.videoModalPlayer video{ width:100%; height:100%; display:block; object-fit:contain; }
.railCard{
  position: relative;
  cursor: pointer;
}

.railOverlay{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  opacity:0;
  transition: opacity .25s ease;
  background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,.40) 100%);
  z-index:2;
}

.railCard:hover .railOverlay{ opacity:1; }

.playBadge{
  width:54px;
  height:54px;
  border-radius:50%;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.30);
  background: rgba(0,0,0,.35);
  color:#fff;
  font-size:22px;
}

.playText{
  color:#fff;
  font-weight:800;
  font-size:14px;
}

/* ===============================
   MODAL CINEMATOGRÁFICO OLLED
================================ */

.videoModal{
  position: fixed;
  inset: 0;
  display: block;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease;
  z-index: 9999;
}

.videoModal.open{
  opacity: 1;
  visibility: visible;
}

.videoModalBackdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.65);
  backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity .3s ease;
}

.videoModal.open .videoModalBackdrop{
  opacity: 1;
}

.videoModalBox{
  position: relative;
  width: min(980px, 92vw);
  margin: 10vh auto 0;
  border-radius: 22px;
  overflow: hidden;
  background: #0b1220;
  border: 1px solid rgba(0,255,136,.15);
  box-shadow:
    0 40px 120px rgba(0,0,0,.65),
    0 0 40px rgba(0,255,136,.12);

  transform: translateY(40px) scale(.92);
  opacity: 0;
  transition: transform .35s cubic-bezier(.16,.84,.44,1),
              opacity .35s ease;
}

.videoModal.open .videoModalBox{
  transform: translateY(0) scale(1);
  opacity: 1;
}

/* Glow animado verde OLLED */
.videoModal.open .videoModalBox{
  animation: glowPulse 2s ease-in-out infinite alternate;
}

@keyframes glowPulse{
  from{
    box-shadow:
      0 40px 120px rgba(0,0,0,.65),
      0 0 30px rgba(0,255,136,.15);
  }
  to{
    box-shadow:
      0 40px 120px rgba(0,0,0,.65),
      0 0 60px rgba(0,255,136,.35);
  }
}

/* Botão fechar */
.videoModalClose{
  position:absolute;
  top:14px;
  right:14px;
  width:44px;
  height:44px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.4);
  color:#fff;
  cursor:pointer;
  transition: transform .2s ease, background .2s ease;
}

.videoModalClose:hover{
  transform: scale(1.1);
  background: rgba(0,0,0,.65);
}

.videoModalPlayer{
  width:100%;
  aspect-ratio:16/9;
  background:#000;
}

.videoModalPlayer video{
  width:100%;
  height:100%;
  object-fit: contain;
}
/* ===== Play pulsando ===== */
@keyframes pulseGlow {
  0%   { transform: scale(1);   box-shadow: 0 0 0 rgba(0,255,136,0); }
  50%  { transform: scale(1.06); box-shadow: 0 0 26px rgba(0,255,136,.25); }
  100% { transform: scale(1);   box-shadow: 0 0 0 rgba(0,255,136,0); }
}

.railCard:hover .playBadge{
  animation: pulseGlow 1.2s ease-in-out infinite;
}
/* ===== Light sweep no hover ===== */
.railCard{
  overflow: hidden;
}

.railCard::after{
  content:"";
  position:absolute;
  top:-20%;
  left:-60%;
  width: 40%;
  height: 140%;
  transform: rotate(18deg);
  background: linear-gradient(90deg, rgba(4, 245, 4, 0), rgba(0, 255, 13, 0.16), rgba(255,255,255,0));
  opacity: 0;
  pointer-events:none;
}

.railCard:hover::after{
  opacity: 1;
  animation: sweep 0.8s ease forwards;
}

@keyframes sweep{
  from{ left:-60%; }
  to{ left:120%; }
}
/* ===== Filtros de categoria ===== */
.videoFilters{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin: 14px 0 18px;
}

.videoFilterBtn{
  border: 1px solid rgba(0,0,0,.10);
  background:#fff;
  padding:10px 14px;
  border-radius: 999px;
  font-weight: 800;
  cursor:pointer;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.videoFilterBtn:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(2,6,23,.08);
}

.videoFilterBtn.active{
  border-color: rgba(0,255,136,.45);
  box-shadow: 0 0 0 4px rgba(0,255,136,.10);
}

/* animação ao filtrar */
.railCard.isHidden{
  opacity: 0;
  transform: scale(.98);
  pointer-events:none;
  display:none;
}
/* OVERRIDE FINAL - força texto branco na seção escura */
.section-dark h2,
.section-dark p{
  color: #ffffff !important;
}

/* ===== Feedbacks Premium Slider ===== */
.feedback-section{
  padding: 86px 0;
  background: linear-gradient(180deg, #ffffff, #f7fafc);
}

.feedbackHead{
  text-align:center;
  max-width: 760px;
  margin: 0 auto 26px;
}

.section-subtitle{
  margin: 10px 0 0;
  color:#475569;
  font-weight: 600;
}

.fbRail{
  position: relative;
  border-radius: 26px;
  padding: 18px;
  background: rgba(255,255,255,0.75);
  border: 1px solid rgba(2, 6, 23, 0.06);
  box-shadow:
    0 24px 80px rgba(2, 6, 23, 0.08),
    inset 0 1px 0 rgba(255,255,255,0.8);
  overflow: hidden;
}

/* “Fumaça/gradiente” nas laterais (premium) */
.fbRail::before,
.fbRail::after{
  content:"";
  position:absolute;
  top:0; bottom:0;
  width: 90px;
  pointer-events:none;
  z-index: 2;
}
.fbRail::before{
  left:0;
  background: linear-gradient(90deg, rgba(247,250,252,1), rgba(247,250,252,0));
}
.fbRail::after{
  right:0;
  background: linear-gradient(270deg, rgba(247,250,252,1), rgba(247,250,252,0));
}

.fbViewport{
  overflow: hidden;
  scroll-behavior: smooth;
}

.fbTrack{
  display:flex;
  gap: 16px;
  padding: 6px 74px; /* espaço pros botões */
  will-change: transform;
}

.fbCard{
  min-width: 320px;
  max-width: 320px;
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(2, 6, 23, 0.06);
  border-radius: 22px;
  padding: 18px 18px 16px;
  box-shadow: 0 18px 60px rgba(2, 6, 23, 0.10);
  transform: translateY(0);
  transition: transform .18s ease, box-shadow .18s ease;
  position: relative;
}

.fbCard:hover{
  transform: translateY(-4px);
  box-shadow: 0 26px 80px rgba(2, 6, 23, 0.14);
}

/* brilho sutil (premium) */
.fbCard::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius: 22px;
  background: radial-gradient(800px 240px at 20% 0%, rgba(132,209,27,0.16), transparent 40%);
  opacity: 0.9;
  pointer-events:none;
  mix-blend-mode: multiply;
}

.fbStars{
  font-size: 14px;
  letter-spacing: 1px;
  color: #f59e0b; /* dourado */
  margin-bottom: 10px;
  font-weight: 900;
}

.fbText{
  margin: 0 0 14px;
  color:#0f172a;
  line-height: 1.65;
  font-weight: 600;
}

.fbAuthor strong{
  display:block;
  font-size: 15px;
  color:#0b1220;
}
.fbAuthor span{
  display:block;
  margin-top: 4px;
  color:#64748b;
  font-weight: 700;
  font-size: 13px;
}

/* Botões */
.fbBtn{
  position:absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border-radius: 16px;
  border: 1px solid rgba(2, 6, 23, 0.10);
  background: rgba(255,255,255,0.78);
  backdrop-filter: blur(10px);
  cursor: pointer;
  z-index: 3;
  font-size: 26px;
  line-height: 1;
  display:grid;
  place-items:center;
  box-shadow: 0 14px 34px rgba(2, 6, 23, 0.14);
  transition: transform .18s ease, background .18s ease;
}

.fbBtn:hover{
  transform: translateY(-50%) scale(1.06);
  background: rgba(255,255,255,0.92);
}

.fbBtn.prev{ left: 14px; }
.fbBtn.next{ right: 14px; }

@media (max-width: 560px){
  .fbTrack{ padding: 6px 58px; }
  .fbCard{ min-width: 280px; max-width: 280px; }
}

/* ===== MODAL PRODUTO (reaproveita .videoModal) ===== */
.productModalBox{
  overflow: hidden;
}

.productModalContent{
  padding: 18px;
}

.productModalGrid{
  display:grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 18px;
  align-items: start;
}

.productModalMedia img{
  width:100%;
  height: 360px;
  object-fit: cover;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,12);
  background: rgba(255,255,255,0.04);
}

.productModalSpecs{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin: 12px 0 8px;
}

.productModalChip{
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,14);
  background: rgba(255,255,255,0.06);
  font-size: 13px;
  opacity: .95;
}

.productModalList{
  margin: 0;
  padding-left: 18px;
  opacity: .95;
  line-height: 1.5;
}

.productModalActions{
  display:flex;
  gap: 10px;
  margin-top: 16px;
  flex-wrap: wrap;
}

@media (max-width: 860px){
  .productModalGrid{ grid-template-columns: 1fr; }
  .productModalMedia img{ height: 260px; }
}
/* ===== POPUP PRODUTO (MODERNO & CLEAN) ===== */
.productModalBox{
  width: min(980px, 92vw);
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(10, 12, 18, .78);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 20px 80px rgba(0,0,0,.55);
  color: rgba(255,255,255,.92);
}

/* garante que todo texto do modal fique claro */
.productModalBox *{
  color: inherit;
}

.productModalBox h2,
.productModalBox h3,
.productModalBox h4{
  color: rgba(255,255,255,.96);
}

.productModalBox p{
  color: rgba(255,255,255,.78);
}

/* imagem */
.productModalBox #productModalImg{
  width: 100%;
  height: 360px;
  object-fit: contain !important;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
}

/* chips de specs */
.productModalBox #productModalSpecs span{
  border: 1px solid rgba(255,255,255,.14) !important;
  background: rgba(255,255,255,.06) !important;
  color: rgba(255,255,255,.9) !important;
}

/* lista */
.productModalBox ul li{
  color: rgba(255,255,255,.86);
}

/* botões dentro do modal */
.productModalBox .btn{
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
}

.productModalBox .btn:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.10);
}

.productModalBox .btn.primary{
  background: rgba(255,255,255,.92);
  color: rgba(10, 12, 18, .92);
  border-color: rgba(255,255,255,.0);
}

.productModalBox .btn.primary:hover{
  background: rgba(255,255,255,1);
}

/* botão X */
.productModalBox .videoModalClose{
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
}

/* backdrop mais premium */
.videoModalBackdrop{
  background: rgba(0,0,0,.65) !important;
}

/* marketplaces */
.marketLinks{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.marketBtn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  text-decoration:none;
  color: rgba(255,255,255,.92);
}

.marketBtn:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.10);
}

.marketDot{
  width:10px;
  height:10px;
  border-radius:999px;
  background: rgba(255,255,255,.55);
}

/* responsivo */
@media (max-width: 860px){
  .productModalBox #productModalImg{ height: 240px; }
}
/* ===== WhatsApp (MODAL) - GLASS PREMIUM ===== */
.productModalBox .btn.primary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;

  padding:14px 20px;
  border-radius:999px;

  background: rgba(37, 211, 102, 0.22);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  border: 1px solid rgba(37,211,102,.35);
  color:#0f172a;

  box-shadow:
    0 14px 40px rgba(37,211,102,.25),
    inset 0 1px 0 rgba(255,255,255,.55);

  position:relative;
  overflow:hidden;

  transition: all .35s cubic-bezier(.16,.84,.44,1);
}

/* brilho “glass” passando */
.productModalBox .btn.primary::before{
  content:"";
  position:absolute;
  top:-40%; 
  left:-60%;
  width:200%;
  height:200%;
  background: linear-gradient(
    120deg,
    transparent 40%,
    rgba(255,255,255,.55) 50%,
    transparent 60%
  );
  transform: rotate(20deg);
  opacity:0;
  transition: all .8s ease;
}

.productModalBox .btn.primary:hover{
  transform: translateY(-4px) scale(1.03);
  box-shadow:
    0 24px 70px rgba(37,211,102,.35),
    0 0 45px rgba(37,211,102,.22);
  border-color: rgba(37,211,102,.55);
}

.productModalBox .btn.primary:hover::before{
  left:120%;
  opacity:1;
}

/* Marketplaces (chips premium) */
.productModalBox .marketLinks{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.productModalBox .marketBtn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  text-decoration:none;
  color: rgba(255,255,255,.92);
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}

.productModalBox .marketBtn:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.22);
}

/* “ícone” redondinho */
.productModalBox .marketIcon{
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display:grid;
  place-items:center;
  font-weight: 800;
  font-size: 12px;
  color: rgba(255,255,255,.95);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
}

/* Cores sutis por marketplace */
.productModalBox .mk-mercadolivre .marketIcon{ background: rgba(255, 222, 0, .22); }
.productModalBox .mk-shopee .marketIcon{ background: rgba(238, 77, 45, .22); }
.productModalBox .mk-magalu .marketIcon{ background: rgba(0, 56, 255, .22); }
.productModalBox .mk-amazon .marketIcon{ background: rgba(255, 153, 0, .20); }

/* ===== POPUP PRODUTO: PAINEL INFORMATIVO (combina com site) ===== */
.productModalBox{
  width: min(920px, 92vw);
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(18, 22, 30, .72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 18px 60px rgba(0,0,0,.45);
  color: rgba(255,255,255,.92);
}

/* tipografia e leitura */
.productModalBox h2{
  font-size: 22px;
  letter-spacing: .2px;
}
.productModalBox p{
  color: rgba(255,255,255,.78);
}
.productModalBox h4{
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: rgba(255,255,255,.65);
}

/* imagem com cara de “preview” e não banner */
.productModalBox #productModalImg{
  width:100%;
  height: 340px;
  object-fit: cover;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
}

/* “chips” viram tags técnicas */
.productModalBox #productModalSpecs span{
  border: 1px solid rgba(255,255,255,.14) !important;
  background: rgba(255,255,255,.06) !important;
  color: rgba(255,255,255,.86) !important;
  font-size: 12px !important;
  padding: 8px 10px !important;
}

/* lista mais limpa */
.productModalBox ul{
  margin-top: 8px !important;
}
.productModalBox ul li{
  color: rgba(255,255,255,.86);
}

/* ações discretas */
.pmActions{
  margin-top: 14px;
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap: wrap;
}
.pmLink{
  color: rgba(255,255,255,.88);
  text-decoration: none;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
}
.pmLink:hover{
  background: rgba(255,255,255,.09);
  transform: translateY(-1px);
}
.pmDivider{
  opacity: .55;
}

/* marketplaces com cara de “onde encontrar” */
.productModalBox .marketLinks{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.productModalBox .marketBtn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  text-decoration:none;
  color: rgba(255,255,255,.86);
  font-size: 13px;
}
.productModalBox .marketBtn:hover{
  background: rgba(255,255,255,.09);
  transform: translateY(-1px);
}

.productModalBox .marketIcon{
  width: 22px;
  height: 22px;
  border-radius: 999px;
  display:grid;
  place-items:center;
  font-weight: 800;
  font-size: 11px;
  color: rgba(255,255,255,.92);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14);
  background: rgba(255,255,255,.08);
}

/* responsivo */
@media (max-width: 860px){
  .productModalBox #productModalImg{ height: 240px; }
}
/* ===== MODAL PRODUTO: INTEGRADO AO SITE (sem cara de anúncio) ===== */
.productModalBox{
  width: min(980px, 92vw);
  border-radius: 18px;

  /* pele de card */
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 18px 60px rgba(0,0,0,.38);

  color: rgba(255,255,255,.92);
  overflow: hidden;
}

/* tira “vibe banner” */
.productModalBox::before{ display:none; }

/* topo tipo “componente” do site (linha sutil) */
.productModalBox .pmHeaderLine{
  height: 1px;
  background: rgba(255,255,255,.10);
  margin: 0 18px;
}

/* imagem mais neutra (menos propaganda) */
.productModalBox #productModalImg{
  height: 260px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.10);
  filter: saturate(.95) contrast(.98);
}

/* texto com hierarquia “ficha técnica” */
.productModalBox h2{
  font-size: 20px;
  margin: 8px 0 6px;
  letter-spacing: .2px;
}
.productModalBox p{
  color: rgba(255,255,255,.78);
}
.productModalBox h4{
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: rgba(255,255,255,.62);
  margin-top: 16px;
}

/* tags mais “metadados” */
.productModalBox #productModalSpecs span{
  border: 1px solid rgba(255,255,255,.12) !important;
  background: rgba(255,255,255,.05) !important;
  color: rgba(255,255,255,.86) !important;
  font-size: 12px !important;
  padding: 7px 10px !important;
}

/* ações discretas (não CTA de anúncio) */
.pmActions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top: 12px;
}

.pmLink{
  text-decoration:none;
  padding: 9px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.90);
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.pmLink:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.20);
}

/* WhatsApp com destaque sutil (sem “anúncio”) */
.pmLinkWhats{
  width:58px;
  height:58px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;

  background: linear-gradient(135deg, #25D366, #128C7E);
  color:#ffffff;
  font-size:26px;

  border:1px solid rgba(255,255,255,.35);

  box-shadow:
    0 18px 45px rgba(37,211,102,.40),
    inset 0 1px 0 rgba(255,255,255,.35);

  transition: all .35s cubic-bezier(.16,.84,.44,1);
}

.pmLinkWhats:hover{
  transform: translateY(-4px) scale(1.08);
  box-shadow:
    0 28px 70px rgba(37,211,102,.55),
    0 0 45px rgba(37,211,102,.45);
}

/* marketplaces como “onde encontrar” (chips neutros) */
.productModalBox .marketBtn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 9px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.86);
  font-size: 13px;
  text-decoration:none;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.productModalBox .marketBtn:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.20);
}

.productModalBox .marketIcon{
  width: 22px;
  height: 22px;
  border-radius: 999px;
  display:grid;
  place-items:center;
  font-weight: 800;
  font-size: 11px;
  background: rgba(255,255,255,.10);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14);
}

/* backdrop igual o clima do site */
.videoModalBackdrop{
  background: rgba(0,0,0,.65) !important;
}

@media (max-width: 860px){
  .productModalBox #productModalImg{ height: 220px; }
}
/* ===== MODAL PRODUTO: MESMA CARA DO SITE (CLARO + VERDE) ===== */
.productModalBox{
  width: min(980px, 92vw);
  border-radius: 22px;
  background: #ffffff;
  border: 1px solid rgba(16, 24, 40, .10);
  box-shadow: 0 24px 70px rgba(16, 24, 40, .18);
  color: #0f172a; /* texto escuro */
  overflow: hidden;
}

/* backdrop suave, igual “clean” */
.videoModalBackdrop{
  background: rgba(2, 6, 23, .45) !important;
}

/* botão X clean */
.productModalBox .videoModalClose{
  border: 1px solid rgba(16, 24, 40, .10);
  background: rgba(255,255,255,.9);
  color: #0f172a;
}

/* imagem com cara de card */
.productModalBox #productModalImg{
  width: 100%;
  height: 280px;
  object-fit: cover;
  border-radius: 18px;
  border: 1px solid rgba(16, 24, 40, .10);
  background: #f8fafc;
}

/* título e texto */
.productModalBox h2{
  font-size: 26px;
  line-height: 1.15;
  margin: 8px 0 10px;
  color: #0f172a;
}
.productModalBox p{
  color: rgba(15, 23, 42, .78);
}

/* subtítulos (ficha técnica) */
.productModalBox h4{
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(15, 23, 42, .55);
  margin: 18px 0 8px;
}

/* chips / specs como “tags” do site */
.productModalChip,
.productModalBox #productModalSpecs span{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(16, 24, 40, .10) !important;
  background: #f8fafc !important;
  color: rgba(15, 23, 42, .85) !important;
  font-size: 13px !important;
}

/* lista de características */
.productModalBox ul{
  margin: 0;
  padding-left: 18px;
}
.productModalBox ul li{
  color: rgba(15, 23, 42, .85);
  line-height: 1.55;
}

/* ações discretas (sem cara de anúncio) */
.pmActions{
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 14px;
}
.pmLink{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding:14px 18px;
  border-radius:999px;
  text-decoration:none;
  font-weight:700;

  background: rgba(255,255,255,0.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  border:1px solid rgba(15,23,42,0.12);
  color:#0f172a;

  box-shadow:
    0 14px 40px rgba(15,23,42,0.10),
    inset 0 1px 0 rgba(255,255,255,0.75);

  transition: transform .35s cubic-bezier(.16,.84,.44,1),
              box-shadow .35s cubic-bezier(.16,.84,.44,1),
              border-color .35s ease;
}

.pmLink:hover{
  transform: translateY(-4px) scale(1.04);
  box-shadow:
    0 24px 70px rgba(15,23,42,0.16),
    0 0 40px rgba(132,209,27,0.18);
  border-color: rgba(132,209,27,0.45);
}

.pmLinkWhats{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:14px 20px;
  border-radius:999px;

  background: linear-gradient(135deg, #25D366, #128C7E);
  color:#ffffff;
  font-weight:700;
  text-decoration:none;

  border:1px solid rgba(255,255,255,.3);

  box-shadow:
    0 15px 40px rgba(37,211,102,.35),
    inset 0 1px 0 rgba(255,255,255,.25);

  transition: all .35s cubic-bezier(.16,.84,.44,1);
}

.pmLinkWhats:hover{
  transform: translateY(-4px) scale(1.05);
  box-shadow:
    0 25px 70px rgba(37,211,102,.45),
    0 0 40px rgba(37,211,102,.35);
}

/* Marketplaces (chips limpos, “onde encontrar”) */
.marketLinks{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}

.marketBtn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(16, 24, 40, .10);
  background: #f8fafc;
  color: rgba(15, 23, 42, .85);
  text-decoration:none;
  font-weight: 600;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.marketBtn:hover{
  transform: translateY(-1px);
  background: #ffffff;
  border-color: rgba(16, 24, 40, .14);
}

/* ícone minimalista */
.marketIcon{
  width: 26px;
  height: 26px;
  border-radius: 999px;
  display:grid;
  place-items:center;
  font-size: 12px;
  font-weight: 800;
  border: 1px solid rgba(16, 24, 40, .10);
  background: #ffffff;
  color: rgba(15, 23, 42, .8);
}

/* responsivo */
@media (max-width: 860px){
  .productModalBox #productModalImg{ height: 220px; }
}
/* ===== MODAL MAIS INTEGRADO E MAIOR ===== */

..productModalBox{
  width: 92vw;
  height: 88vh;
  margin: 4vh auto 0;
  overflow-y: auto;

  background: #ffffff;
  border: 1px solid rgba(16, 24, 40, .08);
  box-shadow: 0 40px 120px rgba(16, 24, 40, .18);

  padding: 28px;
}

/* backdrop menos pesado */
.videoModalBackdrop{
  background: rgba(15, 23, 42, .35) !important;
}

/* grid mais espaçado */
.pmGrid{
  grid-template-columns: 1.1fr 1fr !important;
  gap: 32px !important;
}

/* imagem mais proporcional */
.productModalBox #productModalImg{
  height: 360px;
  border-radius: 20px;
}

/* título mais forte (cara de página) */
.productModalBox h2{
  font-size: 32px;
  font-weight: 800;
}

/* mais respiro geral */
.productModalBox p{
  font-size: 15px;
}
/* ===== MODAL APPLE-STYLE (clean, página de produto) ===== */
.productModalBox{
  width: min(1240px, 94vw);
  height: min(86vh, 820px);
  margin: 5vh auto 0;
  overflow: auto;

  border-radius: 28px;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, .10);
  box-shadow: 0 48px 140px rgba(15, 23, 42, .18);

  color: #0f172a;
}

/* backdrop mais leve (menos “anúncio”) */
.videoModalBackdrop{
  background: rgba(15, 23, 42, .28) !important;
}

/* fecha clean */
.productModalBox .videoModalClose{
  border: 1px solid rgba(15, 23, 42, .10);
  background: rgba(255,255,255,.92);
  color: #0f172a;
}

/* layout interno */
.pmGrid{
  display: grid !important;
  grid-template-columns: 1.15fr 1fr !important;
  gap: 34px !important;
  align-items: start !important;
  padding: 28px !important;
}

/* imagem Apple-like: grande, limpa, sem “banner” */
.productModalBox #productModalImg{
  width: 100%;
  height: 520px;
  object-fit: contain;              /* muda de cover -> contain (mais “catálogo”) */
  background: #f6f7f9;
  border: 1px solid rgba(15, 23, 42, .08);
  border-radius: 22px;
  padding: 18px;
}

/* coluna direita */
.pmKicker{
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(15, 23, 42, .55);
  margin-bottom: 8px;
}

.pmTitle{
  font-size: 40px;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 12px;
  color: #0f172a;
}

.pmSubtitle{
  font-size: 15px;
  line-height: 1.6;
  color: rgba(15, 23, 42, .70);
  margin: 0 0 16px;
  max-width: 52ch;
}

/* chips tipo “metadados” */
.pmChips{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin: 8px 0 18px;
}
.productModalChip,
#productModalSpecs span{
  display:inline-flex;
  align-items:center;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(15, 23, 42, .10) !important;
  background: rgba(15, 23, 42, .04) !important;
  color: rgba(15, 23, 42, .82) !important;
  font-size: 13px !important;
}

/* ações: discretas, mas premium */
.pmActions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin: 6px 0 18px;
}

.pmBtn{
  text-decoration:none;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(15, 23, 42, .12);
  background: #fff;
  color: #0f172a;
  font-weight: 650;
  transition: transform .15s ease, box-shadow .15s ease;
}

.pmBtn:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 34px rgba(15, 23, 42, .10);
}

/* botão principal: verde do site, mas Apple-like (sólido) */
.pmBtnPrimary{
  background: #a3e635;
  border-color: rgba(15, 23, 42, .08);
}

/* separador fino */
.pmDivider{
  height: 1px;
  background: rgba(15, 23, 42, .10);
  margin: 10px 0 18px;
}

/* títulos de seção */
.pmSectionTitle{
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(15, 23, 42, .55);
  margin: 18px 0 10px;
}

/* lista clean */
.pmList{
  margin: 0;
  padding-left: 18px;
  color: rgba(15, 23, 42, .84);
  line-height: 1.65;
}

/* marketplaces: “onde encontrar” (sem cara de anúncio) */
.pmMarkets{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.pmMarkets .marketBtn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(15, 23, 42, .10);
  background: rgba(15, 23, 42, .03);
  color: rgba(15, 23, 42, .80);
  text-decoration:none;
  font-weight: 650;
}

.pmMarkets .marketBtn:hover{
  background: rgba(15, 23, 42, .05);
  transform: translateY(-1px);
}

.pmMarkets .marketIcon{
  width: 26px;
  height: 26px;
  border-radius: 999px;
  display:grid;
  place-items:center;
  font-size: 12px;
  font-weight: 800;
  border: 1px solid rgba(15, 23, 42, .10);
  background: #fff;
  color: rgba(15, 23, 42, .75);
}

/* responsivo */
@media (max-width: 900px){
  .productModalBox{
    height: 90vh;
    margin: 3vh auto 0;
  }
  .pmGrid{
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    padding: 18px !important;
  }
  .productModalBox #productModalImg{
    height: 280px;
  }
  .pmTitle{ font-size: 30px; }
}
/* ===== MARKETPLACES: APPLE STYLE ===== */
.pmMarkets{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

@media (max-width: 520px){
  .pmMarkets{ grid-template-columns: 1fr; }
}

.pmMarkets .marketBtn{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;

  padding: 14px 14px;
  border-radius: 18px;
  border: 1px solid rgba(15, 23, 42, .10);
  background: #fff;
  text-decoration:none;

  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.pmMarkets .marketBtn:hover{
  transform: translateY(-1px);
  box-shadow: 0 16px 36px rgba(15, 23, 42, .10);
  border-color: rgba(15, 23, 42, .14);
}

.pmMarkets .mkLeft{
  display:flex;
  align-items:center;
  gap: 12px;
}

.pmMarkets .marketIcon{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display:grid;
  place-items:center;

  font-size: 12px;
  font-weight: 900;

  border: 1px solid rgba(15, 23, 42, .10);
  background: rgba(15, 23, 42, .03);
  color: rgba(15, 23, 42, .75);
}

.pmMarkets .mkText{
  display:flex;
  flex-direction: column;
  gap: 2px;
}

.pmMarkets .mkName{
  font-weight: 800;
  color: rgba(15, 23, 42, .90);
  font-size: 14px;
}

.pmMarkets .mkHint{
  font-size: 12px;
  color: rgba(15, 23, 42, .55);
}

/* setinha sutil */
.pmMarkets .mkArrow{
  width: 30px;
  height: 30px;
  border-radius: 999px;
  display:grid;
  place-items:center;

  border: 1px solid rgba(15, 23, 42, .08);
  background: rgba(15, 23, 42, .03);
  color: rgba(15, 23, 42, .55);
}
/* ===== BOTÃO WPP (só WPP + pulso verde) ===== */
.pmBtnWpp{
  width: 64px;
  height: 44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius: 999px;
  font-weight: 900;
  letter-spacing: .06em;

  background: #22c55e;
  color: #ffffff;
  border: 1px solid rgba(15, 23, 42, .10);
  box-shadow: 0 14px 30px rgba(34, 197, 94, .22);
  position: relative;
  transition: transform .15s ease, box-shadow .15s ease;
}

.pmBtnWpp:hover{
  transform: translateY(-1px);
  box-shadow: 0 18px 40px rgba(34, 197, 94, .28);
}

/* pulso */
.pmBtnWpp::after{
  content:"";
  position:absolute;
  inset: -6px;
  border-radius: 999px;
  border: 2px solid rgba(34, 197, 94, .40);
  animation: wppPulse 1.6s ease-out infinite;
}

@keyframes wppPulse{
  0%   { transform: scale(1);   opacity: .55; }
  70%  { transform: scale(1.18);opacity: 0; }
  100% { transform: scale(1.18);opacity: 0; }
}

/* ===== MARKETPLACES COM LOGO (apple clean) ===== */
.pmMarkets{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 10px;
}

@media (max-width: 760px){
  .pmMarkets{ grid-template-columns: 1fr; }
}

.pmMarkets .marketBtn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 10px;

  padding: 14px 14px;
  border-radius: 18px;
  border: 1px solid rgba(15, 23, 42, .10);
  background: #ffffff;
  text-decoration:none;

  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.pmMarkets .marketBtn:hover{
  transform: translateY(-1px);
  box-shadow: 0 16px 36px rgba(15, 23, 42, .10);
  border-color: rgba(15, 23, 42, .14);
}

/* logo real */
.pmMarkets .marketLogo{
  height: 22px;
  width: auto;
  display:block;
}

/* se a logo for muito “colorida”, mantém clean */
.pmMarkets .marketLogo.isMono{
  filter: grayscale(1) contrast(1.2);
  opacity: .88;
}
.marketLogo{
  height: 100px;
  width: auto;
  display: block;
}
/* market embaixo da imagem */
.pmBelowImage{
  margin-top: 14px;
}

.pmMiniTitle{
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(15, 23, 42, .55);
  margin-bottom: 10px;
}

/* layout dos botões embaixo da imagem */
.pmMarketsUnder{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* ===== MARKETPLACE BOTÃO PREMIUM MAIS CHAMATIVO ===== */

.marketBtn{
  display:inline-flex;
  align-items:center;
  gap:12px;
  padding:12px 18px;
  border-radius:999px;

  background: linear-gradient(135deg, #ffffff, #eef2f7);
  border:1px solid rgba(16,24,40,.10);

  font-weight:700;
  color:#0f172a;
  text-decoration:none;

  box-shadow:
    0 12px 30px rgba(16,24,40,.12),
    inset 0 1px 0 rgba(255,255,255,.6);

  transition: all .25s ease;
  position:relative;
  overflow:hidden;
}

/* brilho animado */
.marketBtn::after{
  content:"";
  position:absolute;
  top:-50%;
  left:-60%;
  width:200%;
  height:200%;
  background: linear-gradient(
    120deg,
    transparent 40%,
    rgba(255,255,255,.6) 50%,
    transparent 60%
  );
  transform: rotate(20deg);
  opacity:0;
  transition: all .6s ease;
}

/* ===== MARKETPLACE APENAS ÍCONE REDONDO ===== */

/* ===== MARKETPLACE GLASS EFFECT ===== */

.marketBtn{
  width:72px;
  height:72px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;

  /* VIDRO */
  background: rgba(255,255,255,0.25);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  border:1px solid rgba(255,255,255,0.35);

  box-shadow:
    0 15px 40px rgba(0,0,0,.15),
    inset 0 1px 0 rgba(255,255,255,.6);

  transition: all .35s cubic-bezier(.16,.84,.44,1);
  text-decoration:none;
  position:relative;
  overflow:hidden;
}

/* brilho lateral estilo iOS */
.marketBtn::before{
  content:"";
  position:absolute;
  top:-40%;
  left:-60%;
  width:200%;
  height:200%;
  background: linear-gradient(
    120deg,
    transparent 40%,
    rgba(255,255,255,.5) 50%,
    transparent 60%
  );
  transform: rotate(20deg);
  opacity:0;
  transition: all .8s ease;
}

/* logo */
.marketBtn .marketLogo{
  height:50px;
  width:auto;
  transition: transform .35s ease;
}

/* hover glass premium */
.marketBtn:hover{
  transform: translateY(-8px) scale(1.12);

  box-shadow:
    0 25px 70px rgba(0,0,0,.25),
    0 0 45px rgba(132,209,27,.25);

  border-color: rgba(255,255,255,.6);
}

/* anima brilho */
.marketBtn:hover::before{
  left:120%;
  opacity:1;
}

/* leve zoom na logo */
.marketBtn:hover .marketLogo{
  transform: scale(1.12);
}

/* logo dentro do botão */
.pmMarketsUnder .marketLogo{
  height: 18px;
  width: auto;
  display:block;
}

/* “brilho” por marketplace (efeito diferente pra cada) */
.pmMarketsUnder .mk-mercadolivre:hover{
  box-shadow: 0 18px 40px rgba(255, 222, 0, .22), 0 18px 40px rgba(15, 23, 42, .10);
  background: rgba(255, 222, 0, .06);
}

.pmMarketsUnder .mk-shopee:hover{
  box-shadow: 0 18px 40px rgba(238, 77, 45, .22), 0 18px 40px rgba(15, 23, 42, .10);
  background: rgba(238, 77, 45, .06);
}

.pmMarketsUnder .mk-magalu:hover{
  box-shadow: 0 18px 40px rgba(0, 56, 255, .18), 0 18px 40px rgba(15, 23, 42, .10);
  background: rgba(0, 56, 255, .05);
}

.pmMarketsUnder .mk-tiktok:hover{
  box-shadow: 0 18px 40px rgba(0, 0, 0, .18), 0 18px 40px rgba(15, 23, 42, .10);
  background: rgba(15, 23, 42, .03);
}
/* ===== WhatsApp do MODAL: redondo + premium ===== */
#productModalWhats.pmLinkWhats{
  width:58px;
  height:58px;
  padding:0 !important;
  border-radius:50% !important;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  background: linear-gradient(135deg, #25D366, #128C7E);
  border:1px solid rgba(255,255,255,.35);

  box-shadow:
    0 18px 45px rgba(37,211,102,.40),
    inset 0 1px 0 rgba(255,255,255,.35);

  transition: all .35s cubic-bezier(.16,.84,.44,1);
}

#productModalWhats.pmLinkWhats:hover{
  transform: translateY(-4px) scale(1.08);
  box-shadow:
    0 28px 70px rgba(37,211,102,.55),
    0 0 45px rgba(37,211,102,.45);
}

#productModalWhats .wppIcon{
  width:30px;
  height:30px;
  fill:#fff;
}
/* ===== FIX DEFINITIVO: WhatsApp redondo, pequeno e centralizado ===== */
.productModalBox .pmActions{
  display:flex;
  justify-content:center;
  align-items:center;
  width:100%;
  margin-top: 16px;
}

/* força o botão a ter tamanho fixo (evita ícone gigante) */
#productModalWhats{
  width:58px;
  height:58px;
  padding:0 !important;
  border-radius:50% !important;

  display:flex !important;
  align-items:center;
  justify-content:center;

  background: linear-gradient(135deg, #25D366, #128C7E);
  border:1px solid rgba(255,255,255,.35);

  box-shadow:
    0 18px 45px rgba(37,211,102,.40),
    inset 0 1px 0 rgba(255,255,255,.35);

  overflow:hidden;
}

#productModalWhats:hover{
  transform: translateY(-4px) scale(1.08);
  box-shadow:
    0 28px 70px rgba(37,211,102,.55),
    0 0 45px rgba(37,211,102,.45);
}

/* trava o tamanho do SVG */
#productModalWhats .wppIcon{
  width:30px !important;
  height:30px !important;
  display:block;
  fill:#fff;
}
/* Coloca tudo no centro dentro do bloco de marketplaces */
.pmBelowImage{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
}

/* Centraliza os ícones dos marketplaces */
.pmMarketsUnder{
  display:flex;
  justify-content:center;
  gap:16px;
  flex-wrap:wrap;
}
/* ===== FORÇA LAYOUT VERTICAL NOS CARDS ===== */
.card{
  display:flex !important;
  flex-direction:column !important;
}

.card img{
  width:100% !important;
  height:280px;
  object-fit:contain;
}

.cardBody{
  width:100% !important;
  display:block !important;
}
/* Força o modal a virar 1 coluna (descrição embaixo da foto) */
#productModal .pmGrid{
  grid-template-columns: 1fr !important;
}
/* ===== MODAL: imagem sem cortar (PC) ===== */
#productModalImg{
  width: 100%;
  height: clamp(260px, 42vh, 520px);
  object-fit: contain;      /* NÃO corta */
  object-position: center;  /* centraliza */
  background: #fff;         /* evita “vazio cinza” */
  border-radius: 18px;
}
/* garante que o bloco da imagem não trave a altura */
.pmLeft{
  align-self: start;
}

.pmLeft img{
  display:block;
}
/* ===== Modal imagem + vídeo lado a lado ===== */

.mediaRow{
  display: grid;
  grid-template-columns: 1.6fr 1fr; /* imagem maior, vídeo menor */
  gap: 24px;
  align-items: start;
}

.mediaImage img{
  width:100%;
}

.mediaVideo{
  width:100%;
}

/* Mobile empilha */
@media (max-width: 860px){
  .mediaRow{
    grid-template-columns: 1fr;
  }
}
/* ===== TIPOGRAFIA PREMIUM OLLED ===== */

/* Base */
:root{
  --text: #121418;
  --muted: rgba(18,20,24,.74);
  --strong: #0b0f17;
}

body{
  color: var(--text);
  letter-spacing: .1px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Títulos */
h1, h2, h3{
  color: var(--strong);
  letter-spacing: -0.6px;
}

h1{
  font-size: clamp(28px, 3.2vw, 44px);
  line-height: 1.05;
  font-weight: 900;
}

h2{
  font-size: clamp(20px, 2.2vw, 28px);
  line-height: 1.15;
  font-weight: 800;
}

h3{
  font-size: 18px;
  line-height: 1.2;
  font-weight: 800;
}

/* Textos */
p, .lead{
  color: var(--muted);
  line-height: 1.6;
}

/* Cards: título e descrição mais “venda” */
.card h3{
  font-size: 18px;
  font-weight: 900;
  letter-spacing: -0.3px;
  margin: 8px 0 6px;
}

.card p{
  font-size: 14.5px;
  line-height: 1.55;
}

/* Badge (ex: “Iluminação”) */
.badgeTop{
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .6px;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: 999px;
}

/* Botões: mais impactantes */
.btn{
  font-weight: 800;
  letter-spacing: .2px;
  border-radius: 14px;
}

.btn.primary, .ctaNav{
  font-weight: 900;
}

/* Modal: título e descrição mais bonitos */
#productModalTitle{
  font-weight: 900;
  letter-spacing: -0.5px;
  line-height: 1.1;
}

#productModalDesc{
  font-size: 14.8px;
  line-height: 1.6;
  color: var(--muted);
}

/* Links do footer mais “premium” */
.footer a{
  font-weight: 700;
  letter-spacing: .15px;
}
/* Banner de Campanha Sazonal (Plano A) */
.seasonalBanner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:14px 16px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
  text-decoration:none;
  margin: 18px 0;
}
.seasonalBanner__title{
  font-weight:800;
  letter-spacing:.2px;
}
.seasonalBanner__cta{
  opacity:.9;
  font-weight:700;
}
.seasonalBanner:hover{
  transform: translateY(-1px);
  transition: .2s ease;
}
/* ===== Carrossel de Campanhas (Banner) ===== */
.seasonalCarousel{
  position: relative;
  margin: 18px 0 24px;
  border-radius: 18px;
  overflow: hidden;
}

.seasonalViewport{
  overflow: hidden;
  outline: none;
}

.seasonalTrack{
  display: flex;
  width: 100%;
  transform: translateX(0%);
  transition: transform .45s ease;
}

.seasonalSlide{
  min-width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 18px;
  text-decoration: none;
  border-radius: 18px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.16);
  backdrop-filter: blur(10px);
}

.seasonalSlide__title{
  font-weight: 900;
  font-size: 18px;
  letter-spacing: -0.01em;
  color: #fff;
}

.seasonalSlide__cta{
  font-weight: 800;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.18);
  color: #fff;
  white-space: nowrap;
}

.seasonalNav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(0,0,0,0.25);
  color: #fff;
  font-size: 22px;
  cursor: pointer;
  z-index: 2;
}

.seasonalNav.prev{ left: 10px; }
.seasonalNav.next{ right: 10px; }

.seasonalDots{
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 10px;
}

.seasonalDot{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,0.25);
}

.seasonalDot.active{
  background: rgba(255,255,255,0.85);
}

/* Mobile: reduz padding */
@media (max-width: 600px){
  .seasonalSlide{ padding: 14px 14px; }
  .seasonalSlide__title{ font-size: 16px; }
  .seasonalNav{ display:none; } /* no mobile vai por swipe/auto */
}
/* ===== Carrossel de Campanhas com Imagem ===== */
.seasonalCarousel{
  position: relative;
  margin: 18px 0 24px;
  border-radius: 18px;
  overflow: hidden;
}

.seasonalViewport{ overflow: hidden; outline: none; }

.seasonalTrack{
  display: flex;
  width: 100%;
  transform: translateX(0%);
  transition: transform .45s ease;
}

.seasonalSlide{
  min-width: 100%;
  position: relative;
  display: block;
  height: 420px;
  border-radius: 18px;
  overflow: hidden;
  text-decoration: none;
}

.seasonalSlide__img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.seasonalSlide__overlay{
  background: linear-gradient(90deg, rgba(0,0,0,.35), rgba(0,0,0,.05));
}

.seasonalSlide__content{
  position: relative;
  z-index: 2;
  height: 100%;
  padding: 18px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
}

.seasonalSlide__title{
  font-weight: 900;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: #fff;
  max-width: 760px;
}

.seasonalSlide__cta{
  width: fit-content;
  font-weight: 800;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.22);
  color: #fff;
}

.seasonalNav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.22);
  background: rgba(0,0,0,0.30);
  color: #fff;
  font-size: 22px;
  cursor: pointer;
  z-index: 3;
}

.seasonalNav.prev{ left: 10px; }
.seasonalNav.next{ right: 10px; }

.seasonalDots{
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 10px;
}

.seasonalDot{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,0.25);
}
.seasonalDot.active{ background: rgba(255,255,255,0.85); }

@media (max-width: 600px){
  .seasonalSlide{ height: 180px; }
  .seasonalSlide__title{ font-size: 18px; }
  .seasonalNav{ display:none; }
}
/* ===== Banner FULL-WIDTH (de ponta a ponta) ===== */
.seasonalCarousel{
  width: 100vw;
  margin-left: calc(50% - 50vw);   /* sai do container e ocupa a tela toda */
  margin-right: calc(50% - 50vw);
  border-radius: 0;               /* liso, sem borda arredondada */
  overflow: hidden;
}

.seasonalSlide{
  height: 520px;                  /* mais alto no desktop */
  border-radius: 0;               /* liso */
}

/* mobile */
@media (max-width: 600px){
  .seasonalSlide{ height: 300px; }
}
/* Link especial no menu */
.seasonalNavLink{
  font-weight: 700;
  color: #e91e63;
  position: relative;
  transition: all .25s ease;
}

.seasonalNavLink:hover{
  color: #ff4081;
}

.seasonalNavLink::after{
  content: "";
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 100%;
  height: 2px;
  background: #e91e63;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s ease;
}

.seasonalNavLink:hover::after{
  transform: scaleX(1);
}
/* BOTÃO VOLTAR AO TOPO */
#backToTop{
  position:fixed;
  bottom:100px;   /* sobe o botão acima do WhatsApp */
  right:30px;
  width:48px;
  height:48px;
  border:none;
  border-radius:50%;
  background:#8bd430;
  color:#fff;
  font-size:22px;
  cursor:pointer;
  display:none;
  align-items:center;
  justify-content:center;
  box-shadow:0 6px 18px rgba(0,0,0,0.15);
  z-index:999;
  transition:all .25s ease;
}

#backToTop:hover{
  transform:translateY(-3px);
  box-shadow:0 8px 22px rgba(0,0,0,0.25);
}
/* ===== FOOTER FORÇADO FULL-WIDTH (mesmo dentro de container) ===== */
.footer{
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  background:#111;
  color:#fff;
}

/* opcional: dá respiro lateral pro conteúdo do rodapé */
.footer .footerGrid,
.footer .footerBottom{
  padding-left: 22px;
  padding-right: 22px;
}
.isHidden{
  display:none !important;
}
/* ESconde cards quando filtra */
.isHidden{
  display:none !important;
}
/* ===== Transição premium na troca de categoria (vídeos) ===== */
.railCard{
  transition: opacity .22s ease, transform .22s ease;
  will-change: opacity, transform;
}

.railCard.isFadingOut{
  opacity: 0;
  transform: translateY(6px);
}

.railCard.isFadingIn{
  opacity: 0;
  transform: translateY(6px);
}
/* TOPBAR ESTILO MARKETPLACE */
.topbar-wrap{
  width:100%;
  display:flex;
  justify-content:center;
  padding:10px 16px 0;
  background:transparent;
}

.topbar-pill{
  display:flex;
  align-items:center;
  gap:14px;
  background:#fff159;
  color:#1f2937;
  border-radius:999px;
  padding:10px 18px;
  min-height:44px;
  box-shadow:0 8px 18px rgba(0,0,0,.08);
  border:1px solid rgba(0,0,0,.06);
}

.topbar-badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: inherit;
  color: #fff;
  font-weight: 800;
  font-size: 12px;
  border-radius: 999px;
  padding: 5px 10px;
  line-height: 1;
  white-space: nowrap;
  flex: 0 0 auto;
  transition: background-color .45s ease, color .45s ease;
}

.topbar-rotator{
  position:relative;
  height:20px;
  min-width:260px;
  overflow:hidden;
}

.topbar-message{
  position:absolute;
  left:0;
  top:0;
  width:100%;
  opacity:0;
  transform:translateY(10px);
  transition:opacity .35s ease, transform .35s ease;
  font-weight:800;
  font-size:14px;
  white-space:nowrap;
}

.topbar-message.active{
  opacity:1;
  transform:translateY(0);
}

@media (max-width: 768px){
  .topbar-wrap{
    padding:8px 12px 0;
  }

  .topbar-pill{
    width:100%;
    max-width:100%;
    gap:10px;
    padding:10px 14px;
  }

  .topbar-badge{
    font-size:12px;
    padding:6px 10px;
  }

  .topbar-rotator{
    min-width:0;
    flex:1;
  }

  .topbar-message{
    font-size:13px;
  }
}
/* TOPBAR DENTRO DO HEADER, CANTO SUPERIOR DIREITO */
.header{
  position: sticky;
  top: 0;
  z-index: 50;
  background: #ffffff;
  border-bottom: 1px solid #e6e6e6;
}

.topbar-header{
position:absolute;
top:8px;
left:22px;
}

.topbar-pill{
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff159;
  color: #111827;
  border-radius: 999px;
  padding: 6px 12px;
  min-height: 34px;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 6px 16px rgba(0,0,0,.08);
}

.topbar-badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: inherit;
  color: #fff;
  font-weight: 800;
  font-size: 12px;
  border-radius: 999px;
  padding: 5px 10px;
  line-height: 1;
  white-space: nowrap;
  flex: 0 0 auto;
  transition: background-color .45s ease, color .45s ease;
}

.topbar-rotator{
  position: relative;
  width: 250px;
  height: 18px;
  overflow: hidden;
}

.topbar-message{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .35s ease, transform .35s ease;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}

.topbar-message.active{
  opacity: 1;
  transform: translateY(0);
}
.topbar-header{
  position: absolute;
  top: 8px;
  right: 22px;
  z-index: 60;

  display: inline-flex;
  align-items: center;
  gap: 10px;

  width: auto;
  max-width: 380px;
  min-width: 0;
  padding: 6px 12px;

  background: #fff159;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 999px;
  box-shadow: 0 6px 16px rgba(0,0,0,.08);

  overflow: hidden;
}

.topbar-badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: inherit;
  color: #fff;
  font-weight: 800;
  font-size: 12px;
  border-radius: 999px;
  padding: 5px 10px;
  line-height: 1;
  white-space: nowrap;
  flex: 0 0 auto;
  transition: background-color .45s ease, color .45s ease;
}

.topbar-rotator{
  position: relative;
  width: 240px;
  height: 20px;
  overflow: hidden;
  flex: 0 0 240px;
  border-radius: 999px;
}

.topbar-bubble{
  position: absolute;
  left: -32px;
  top: 50%;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: #7c3aed;
  transform: translateY(-50%) scale(0);
  z-index: 1;
  opacity: 0;
}

.topbar-message{
  position: absolute;
  left: 12px;
  top: 0;
  width: calc(100% - 24px);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .28s ease, transform .28s ease;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
  z-index: 2;
  color: #111827;
}

.topbar-message.active{
  opacity: 1;
  transform: translateY(0);
}
/* ===== TOPBAR HEADER PREMIUM ESTÁVEL ===== */
.topbar-header{
position:absolute;
top:8px;
left:22px;

display:inline-flex;
align-items:center;
gap:10px;

padding:6px 14px;

border-radius:999px;

background:rgba(255,255,255,0.65);
backdrop-filter:blur(8px);

border:1px solid rgba(0,0,0,.08);

box-shadow:0 6px 16px rgba(0,0,0,.08);

transition:background-color .6s ease, box-shadow .4s ease;
}

.topbar-badge{
display:inline-flex;
align-items:center;
justify-content:center;

background:linear-gradient(135deg,#7c3aed,#a855f7);

color:#fff;
font-weight:800;
font-size:12px;

border-radius:999px;
padding:5px 10px;

letter-spacing:.5px;
}

.topbar-rotator{
  position: relative;
  width: 240px;
  height: 18px;
  overflow: hidden;
  flex: 0 0 240px;
}

.topbar-message{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .32s ease, transform .32s ease, color .32s ease;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 800;
  color: #111827;
  z-index: 2;
}

.topbar-message.active{
  opacity: 1;
  transform: translateY(0);
}

.topbar-dot{
  position: absolute;
  left: -20px;
  top: 50%;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: #7c3aed;
  transform: translateY(-50%);
  opacity: 0;
  z-index: 1;
}

.topbar-rotator.animating .topbar-dot{
  animation: topbarDotPass .65s ease forwards;
}

@keyframes topbarDotPass{
  0%{
    left: -20px;
    opacity: 0;
    transform: translateY(-50%) scale(.6);
  }
  15%{
    opacity: 1;
    transform: translateY(-50%) scale(1);
  }
  50%{
    left: 50%;
    transform: translateY(-50%) scale(1.8);
    opacity: 1;
  }
  100%{
    left: calc(100% + 20px);
    opacity: 0;
    transform: translateY(-50%) scale(.8);
  }
}

/* espaço no topo do header para a barra */
.nav{
  padding: 28px 0 10px;
}

@media (max-width: 980px){
  .topbar-header{
    display: none;
  }
}
.topbar-header{
transition: background-color .6s ease;
}
/* ===== MOBILE OTIMIZADO ===== */
@media (max-width: 768px){

  .container{
    padding: 0 14px;
  }

  .header{
    position: sticky;
    top: 0;
  }

  .nav{
    padding: 14px 0;
  }

  .logo{
    width: 96px;
  }

  .navLinks{
    display: none;
  }

  .menuBtn{
    display: inline-flex;
  }

  .topbar-header{
    display: none !important;
  }
}
@media (max-width: 768px){

  .hero{
    padding: 14px 0 42px 0;
  }

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

  .heroTopLogo{
    margin-bottom: -8px;
  }

  .heroTopLogo img{
    width: 280px;
    height: auto;
    object-fit: contain;
  }

  .heroText h1{
    font-size: 34px;
    line-height: 1.08;
    margin: 18px 0 12px;
    text-align: center;
  }

  .lead{
    font-size: 14px;
    line-height: 1.6;
    text-align: center;
    max-width: 100%;
  }

  .heroActions{
    justify-content: center;
    gap: 12px;
  }

  .heroActions .btn{
    width: 100%;
    max-width: 280px;
  }

  .heroMedia img{
    width: 100%;
    height: auto;
    object-fit: cover;
  }
}
@media (max-width: 768px){

  .section{
    padding: 52px 0;
  }

  .section h2{
    font-size: 30px;
    text-align: center;
  }

  .section p{
    font-size: 14px;
    text-align: center;
    margin: 0 auto 24px;
  }

  .grid{
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .card{
    border-radius: 16px;
  }

  .card img{
    height: 220px;
    object-fit: contain;
    padding: 8px;
  }

  .cardBody{
    padding: 18px 16px 16px;
  }

  .cardBody h3{
    font-size: 22px;
  }

  .cardBody p{
    font-size: 14px;
    line-height: 1.55;
    text-align: left;
  }
}
@media (max-width: 768px){

  .videoFilters{
    justify-content: flex-start;
    gap: 8px;
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 4px;
    scrollbar-width: none;
  }

  .videoFilters::-webkit-scrollbar{
    display: none;
  }

  .videoFilterBtn{
    flex: 0 0 auto;
    font-size: 13px;
    padding: 9px 12px;
  }

  .rail{
    margin-top: 12px;
  }

  .railBtn{
    width: 38px;
    height: 38px;
    font-size: 24px;
  }

  .railCard{
    flex: 0 0 240px;
    height: 140px;
  }

  .playBadge{
    width: 44px;
    height: 44px;
    font-size: 18px;
  }

  .playText{
    font-size: 12px;
  }
}
@media (max-width: 768px){

  .whatsappFloat{
    width: 56px;
    height: 56px;
    right: 16px;
    bottom: 16px;
  }

  .whatsappFloat img{
    width: 28px;
    height: 28px;
  }

  #backToTop{
    right: 16px;
    bottom: 84px;
    width: 46px;
    height: 46px;
  }
}
/* ===== MOBILE HEADER + TOPBAR ===== */
@media (max-width: 768px){

  .container{
    padding: 0 14px;
  }

  .header{
    position: sticky;
    top: 0;
    z-index: 80;
  }

  .nav{
    padding: 12px 0 !important;
    min-height: 64px;
  }

  .logo{
    width: 92px;
    height: auto;
  }

  .navLinks{
    display: none !important;
  }

  .menuBtn{
    display: inline-flex !important;
  }

  .mobileNav{
    padding: 10px 0 14px;
  }

  /* topbar visível no celular */
@media (max-width: 768px){

  .topbar-header{
    position: static !important;
    display: inline-flex !important;
    margin: 8px auto 0;

    width: auto;
    max-width: 310px;

    padding: 6px 12px;
    border-radius: 999px;

    justify-content: flex-start;
    align-items: center;
  }

  .topbar-rotator{
    position: relative;
    width: 210px;
    height: 18px;
    overflow: hidden;
    flex: 0 0 210px;
  }

  .topbar-message{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;

    font-size: 12px;
    white-space: nowrap;

    opacity: 0;
    transform: translateY(6px);
    transition: opacity .3s ease, transform .3s ease;
  }

  .topbar-message.active{
    opacity: 1;
    transform: translateY(0);
  }
}
}
@media (max-width: 768px){
  .hero{
    padding: 16px 0 42px 0;
  }

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

  .heroTopLogo{
    margin-top: 0;
    margin-bottom: -6px;
  }

  .heroTopLogo img{
    width: 260px;
    height: auto;
    object-fit: contain;
  }

  .heroText h1{
    font-size: 34px;
    line-height: 1.08;
    margin: 18px 0 12px;
    text-align: center;
  }

  .lead{
    font-size: 14px;
    line-height: 1.6;
    text-align: center;
    max-width: 100%;
  }

  .heroActions{
    justify-content: center;
    gap: 12px;
  }

  .heroActions .btn{
    width: 100%;
    max-width: 280px;
  }
}
@media (max-width: 768px){
  .hero{
    padding: 16px 0 42px 0;
  }

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

  .heroTopLogo{
    margin-top: 0;
    margin-bottom: -6px;
  }

  .heroTopLogo img{
    width: 260px;
    height: auto;
    object-fit: contain;
  }

  .heroText h1{
    font-size: 34px;
    line-height: 1.08;
    margin: 18px 0 12px;
    text-align: center;
  }

  .lead{
    font-size: 14px;
    line-height: 1.6;
    text-align: center;
    max-width: 100%;
  }

  .heroActions{
    justify-content: center;
    gap: 12px;
  }

  .heroActions .btn{
    width: 100%;
    max-width: 280px;
  }
}
@media (max-width: 768px){
  .videoFilters{
    justify-content: flex-start;
    gap: 8px;
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 4px;
    scrollbar-width: none;
  }

  .videoFilters::-webkit-scrollbar{
    display: none;
  }

  .videoFilterBtn{
    flex: 0 0 auto;
    font-size: 13px;
    padding: 9px 12px;
  }

  .railCard{
    flex: 0 0 240px;
    height: 140px;
  }

  .railBtn{
    width: 38px;
    height: 38px;
    font-size: 24px;
  }
}
@media (max-width: 768px){
  .whatsappFloat{
    width: 56px;
    height: 56px;
    right: 16px;
    bottom: 16px;
  }

  .whatsappFloat img{
    width: 28px;
    height: 28px;
  }

  #backToTop{
    right: 16px;
    bottom: 84px;
    width: 46px;
    height: 46px;
  }
}