/* Landing v3.0 — topo na pegada do print (central + mídia grande) */
:root{
  --bg:#070A12;
  --txt: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.72);
  --muted2: rgba(255,255,255,.55);
  --line: rgba(255,255,255,.10);
  --shadow: 0 18px 60px rgba(0,0,0,.45);
  --r: 22px;
  --g1:#24ff8a;
  --g2:#00d6ff;
  --g3:#7a4bff;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:"DM Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--txt);
  background: var(--bg);
  background-attachment: fixed;
overflow-x:hidden;
}

/* Fundo: cor única (fixo) */

a{color:inherit; text-decoration:none}
.wrap{max-width:1140px; margin:0 auto; padding:0 20px}
.skip{position:absolute; left:-999px; top:auto; width:1px; height:1px; overflow:hidden}
.skip:focus{left:16px; top:16px; width:auto; height:auto; padding:10px 12px; background:#111; border:1px solid var(--line); border-radius:12px; z-index:9999}

.muted{color:var(--muted)}
.tiny{font-size:12px; color:var(--muted2)}

.top{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(12px);
  background: rgba(7,10,18,.72);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.topbar{display:flex; align-items:center; justify-content:space-between; gap:18px; padding:16px 0}
.brand{display:flex; align-items:center; gap:12px}
.logo{width:auto;height:auto;border-radius:0;background:transparent;border:0;box-shadow:none;display:flex;align-items:center;justify-content:center}
.logo svg{width:22px; height:22px}

.logoImg{width:36px;height:36px;display:block;filter: drop-shadow(0 10px 18px rgba(0,0,0,.35))}

.mediaBody.mediaPhoto{padding:14px 14px 16px; position:relative;}
.siteShot{
  width:100%;
  height:auto;
  display:block;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
}

.brandName{font-weight:800; letter-spacing:.2px}
.brandTag{font-size:13px; color:var(--muted2); margin-top:1px}
.nav{display:flex; gap:18px; font-size:14px; color:var(--muted)}
.nav a{padding:8px 10px; border-radius:12px}
.nav a:hover{background: rgba(255,255,255,.06); color:var(--txt)}
.topCta{display:flex; gap:10px; align-items:center}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:10px;
  border-radius:16px;
  padding:11px 15px;
  font-weight:800;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.10);
  box-shadow: 0 10px 22px rgba(0,0,0,.25);
  cursor:pointer;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.btn:hover{transform: translateY(-1px); background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.16)}
.btn:active{transform: translateY(0)}
.btn.ghost{background: transparent; box-shadow:none}
.btn.big{padding:14px 18px; border-radius:18px}
.btn.full{width:100%}

/* HERO central + efeito (só no topo) */
.hero{position:relative; padding:96px 0 70px}
.heroInner{max-width:1040px; text-align:center}
.heroFx{
  position:absolute; inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:.75;
  /* equalizer discreto (não repete, só no topo) */
  background:
    radial-gradient(900px 520px at 50% 0%, rgba(0,0,0,.35), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.30), transparent 60%);
}
.heroFx:after{
  content:"";
  position:absolute; left:50%; top:96px;
  width:min(1080px, 92vw);
  height:320px;
  transform: translateX(-50%);
  background:
    linear-gradient(90deg,
      transparent 0%,
      rgba(36,255,138,.12) 10%,
      transparent 20%,
      rgba(0,214,255,.10) 30%,
      transparent 40%,
      rgba(122,75,255,.10) 50%,
      transparent 60%,
      rgba(36,255,138,.10) 70%,
      transparent 80%,
      rgba(0,214,255,.10) 90%,
      transparent 100%);
  mask-image: radial-gradient(closest-side, rgba(0,0,0,1), rgba(0,0,0,0));
  filter: blur(0px);
}

.pill{
  display:inline-flex; align-items:center; gap:10px;
  padding:8px 13px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  color:var(--muted);
}
.pill .dot{width:8px; height:8px; border-radius:99px; background: var(--g1); box-shadow:0 0 18px rgba(36,255,138,.45)}

h1{margin:22px 0 16px; font-size:68px; line-height:1.02; letter-spacing:-1.2px}
.hl{
  background: linear-gradient(90deg, var(--g3), var(--g2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hl2{
  background: linear-gradient(90deg, var(--g1), var(--g2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

.sub{margin:0 auto 26px; max-width:860px; color:var(--muted); font-size:19px; line-height:1.75}
.heroActions{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin:26px 0 18px}

/* Bloquinhos pequenos */
.miniRow{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:6px 0 34px}
.mini{
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.86);
  font-weight:800;
}
.miniI{font-size:16px}
.miniT{font-size:14px}

/* App exclusivo (ícone grande + texto objetivo) */
.appCallout{
  max-width: 920px;
  margin: 0 auto 14px;
  display:flex;
  align-items:center;
  gap:14px;
  padding: 14px 16px;
  border-radius: calc(var(--r) + 6px);
  border:1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
}
.appIcon{
  width:54px; height:54px;
  border-radius: 16px;
  display:grid; place-items:center;
  font-size: 30px;
  background: radial-gradient(circle at 30% 30%, rgba(0,255,170,.22), rgba(0,0,0,0) 60%),
              radial-gradient(circle at 70% 60%, rgba(122,92,255,.22), rgba(0,0,0,0) 58%);
  border:1px solid rgba(255,255,255,.12);
}
.appTitle{font-weight:900; letter-spacing:-.2px}
.appDesc{color:var(--muted); font-size:14px; line-height:1.4}
.appBullets{margin-top:6px; display:flex; flex-wrap:wrap; gap:8px}
.appBullets span{
  padding:6px 10px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  color: rgba(255,255,255,.88);
  font-weight:800;
  font-size:12px;
}

/* Card grande (mídia) */
.heroMedia{
  display:grid;
  grid-template-columns: 1fr;
  gap:16px;
  align-items:stretch;
  margin-top:10px;
}
.mediaCard{max-width: 920px; margin: 0 auto;

  border-radius: calc(var(--r) + 6px);
  border:1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  box-shadow: var(--shadow);
  overflow:hidden;
  text-align:left;
}
.mediaTop{
  display:flex; align-items:center; gap:8px;
  padding:12px 14px;
  border-bottom:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
}
.dots{width:10px; height:10px; border-radius:999px; background: rgba(255,255,255,.18)}
.url{margin-left:auto; font-size:12px; color:var(--muted2)}
.mediaBody{padding:16px 16px 18px}
.shot{
  border-radius: 18px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  overflow:hidden;
}
.shotBar{height:34px; background: rgba(255,255,255,.06)}
.shotHero{height:110px; background: linear-gradient(90deg, rgba(122,75,255,.18), rgba(0,214,255,.10))}
.shotGrid{display:grid; grid-template-columns: repeat(3, 1fr); gap:10px; padding:12px}
.shotCard{
  height:86px;
  border-radius: 16px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
}
.mediaHint{margin-top:0; position:absolute; left:14px; right:14px; bottom:14px; padding:10px 12px; border-radius:16px; background: rgba(0,0,0,.40); border:1px solid rgba(255,255,255,.10); color: rgba(170,255,230,.98); font-weight:900; font-size:14px; backdrop-filter: blur(10px);}


.section{padding:78px 0; text-align:left}
.section.zebra{
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0));
  border-top:1px solid rgba(255,255,255,.06);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.head{margin-bottom:20px; text-align:left}
h2{margin:0 0 8px; font-size:34px; letter-spacing:-.2px}

.chips{display:flex; flex-wrap:wrap; gap:12px}
.chip{
  display:inline-flex; align-items:center; gap:10px;
  padding:12px 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.86);
  font-weight:800;
  cursor:pointer;
}
.chip:hover{background: rgba(255,255,255,.08)}
.chip:focus{outline:2px solid rgba(0,214,255,.35); outline-offset:2px}

.chipDetail{
  margin-top:16px;
  min-height:44px;
  padding:14px 16px;
  border-radius: var(--r);
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.14);
  color:var(--muted);
}

.band{
  position:relative;
  padding:62px 0;
  overflow:hidden;
  border-top:1px solid rgba(255,255,255,.06);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.bandBg{
  position:absolute; inset:0;
  background:
    radial-gradient(900px 460px at 15% 30%, rgba(0,214,255,.14), transparent 60%),
    radial-gradient(900px 520px at 85% 60%, rgba(36,255,138,.12), transparent 62%),
    linear-gradient(180deg, rgba(0,0,0,.62), rgba(0,0,0,.32));
}
.bandGrid{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  flex-wrap:wrap;
}
.bandPill{
  display:inline-flex;
  padding:7px 12px;
  border-radius:999px;
  border:1px solid rgba(36,255,138,.22);
  background: rgba(36,255,138,.08);
  color: rgba(170,255,230,.95);
  font-weight:900;
  width:fit-content;
  margin-bottom:10px;
}
.band h3{margin:0 0 8px; font-size:28px}
.bandCtas{display:flex; gap:12px; flex-wrap:wrap}

.steps{display:grid; grid-template-columns: repeat(3, 1fr); gap:14px}
.step{
  padding:18px;
  border-radius: var(--r);
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  box-shadow: 0 14px 44px rgba(0,0,0,.22);
  display:flex;
  gap:12px;
  align-items:flex-start;
}
.step .n{
  width:38px; height:38px;
  border-radius:16px;
  display:grid; place-items:center;
  background: rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.10);
  font-weight:900;
}
.step .t{font-weight:900}

.priceGrid{display:grid; grid-template-columns: 1.18fr .82fr; gap:14px; align-items:start}
.priceCard{
  border-radius: calc(var(--r) + 2px);
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  padding:22px;
  box-shadow: var(--shadow);
}
.priceTop{display:flex; align-items:flex-start; justify-content:space-between; gap:12px}
.pTitle{font-size:18px; font-weight:900}
.badge{
  font-size:12px; font-weight:900;
  padding:7px 11px; border-radius:999px;
  background: rgba(36,255,138,.10);
  border:1px solid rgba(36,255,138,.18);
  color: rgba(170,255,230,.95);
}
.price{display:flex; align-items:baseline; gap:8px; margin:18px 0 8px}
.rs{font-size:14px; color:var(--muted)}
.val{font-size:60px; font-weight:900; letter-spacing:-1px}
.per{font-size:13px; color:var(--muted2)}
.checks{margin-top:14px; display:grid; gap:10px}
.check{
  padding:12px 14px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
  color: var(--muted);
}
.priceCtas{margin-top:16px; display:grid; gap:10px}

.sideCard{
  border-radius: var(--r);
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  padding:18px;
  box-shadow: 0 14px 44px rgba(0,0,0,.22);
}
.hr{height:1px; background: rgba(255,255,255,.08); margin:16px 0}
.list{margin:0; padding-left:18px; color:var(--muted)}
.list li{margin:10px 0}


/* --- PROMO (VALOR) COMPACTO --- */
.promoWrap{
  margin-top:16px;
  max-width:860px;
  margin-left:auto;
  margin-right:auto;
  padding:18px 22px;
  border-radius:20px;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 10px 30px rgba(0,0,0,.25);
  text-align:center;
}
.promoPills{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:center;
  margin-bottom:10px;
}
.promoPill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  font-weight:600;
  font-size:13px;
  letter-spacing:.2px;
  color:rgba(255,255,255,.92);
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.10);
}
.promoPill--hot{
  background:rgba(0,255,170,.08);
  border-color:rgba(0,255,170,.18);
}
.promoPrices{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:center;
  gap:14px;
  margin-top:6px;
}
.promoFrom{
  font-size:16px;
  color:rgba(255,255,255,.70);
}
.promoFromPrice{
  text-decoration:line-through;
  text-decoration-thickness:2px;
  text-decoration-color:rgba(255,255,255,.35);
}
.promoTo{
  font-size:18px;
  color:rgba(255,255,255,.90);
}
.promoToPrice{
  font-size:44px;
  line-height:1;
  font-weight:800;
  letter-spacing:-.02em;
  background:linear-gradient(90deg, #7c6cff 0%, #2dd4ff 45%, #00ffb3 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.promoSub{
  margin-top:10px;
  font-size:14px;
  color:rgba(255,255,255,.72);
}
.promoSub2{
  margin-top:6px;
  font-size:14px;
  color:rgba(255,255,255,.60);
}
@media (max-width:520px){
  .promoWrap{padding:16px 14px;border-radius:18px}
  .promoToPrice{font-size:38px}
}

.faq{display:grid; gap:12px}
.qa{
  border-radius: var(--r);
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  padding:14px 16px;
}
.qa summary{cursor:pointer; font-weight:900}
.ans{margin-top:12px; color:var(--muted); line-height:1.7}

.final{
  margin-top:18px;
  border-radius: calc(var(--r) + 2px);
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  padding:18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
}
.finalT{font-weight:900; font-size:18px}

.foot{
  padding:26px 0 38px;
  border-top:1px solid rgba(255,255,255,.06);
}
.footGrid{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap}

.floatWpp{
  position:fixed; right:16px; bottom:16px; z-index:60;
  display:flex; gap:10px; align-items:center;
  padding:12px 14px;
  border-radius:999px;
  background: rgba(36,255,138,.10);
  border:1px solid rgba(36,255,138,.18);
  color: rgba(170,255,230,.95);
  box-shadow: 0 14px 44px rgba(0,0,0,.35);
}
.floatWpp .txt{font-weight:900}
.floatWpp:hover{transform: translateY(-1px)}

@media (max-width: 980px){
  .nav{display:none}
  .heroInner{max-width:720px}
  h1{font-size:46px}
  .heroMedia{grid-template-columns: 1fr}
}
@media (max-width: 520px){
  .logoImg{width:32px;height:32px}
  h1{font-size:38px}
  .sub{font-size:16px}
  .topCta .btn.ghost{display:none}
}
@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important}
}


/* Hero: detalhe fino (linha) para reforçar hierarquia */
.heroInner:after{
  content:"";
  display:block;
  width:min(860px, 92vw);
  height:1px;
  margin:44px auto 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
}



/* Seções */
.section{padding:70px 0}
.secHead{text-align:center; max-width:980px; margin:0 auto 26px}
.kicker{display:inline-flex; align-items:center; gap:10px; padding:9px 12px; border-radius:999px;
  border:1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.06);
  color: rgba(210,255,240,.92); font-weight:800; letter-spacing:.2px}
.secHead h2{margin:14px 0 10px; font-size:34px; letter-spacing:-.6px}
.secSub{margin:0 auto; color:var(--muted); max-width:760px; line-height:1.7}

.catGrid{display:grid; grid-template-columns: 1fr 1fr; gap:16px; align-items:start}
.catCard{border:1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.04);
  border-radius:22px; padding:18px; box-shadow: 0 18px 70px rgba(0,0,0,.28)}
.catTop{display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:6px 4px 14px}
.catTitle{font-weight:900; font-size:16px}
.catNote{color: rgba(255,255,255,.55); font-size:13px}

.chipGrid{display:flex; flex-wrap:wrap; gap:10px}
.chip{
  position:relative;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.22);
  color: rgba(255,255,255,.92);
  padding:10px 12px;
  border-radius:999px;
  font-weight:800;
  font-size:13px;
  cursor:pointer;
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
  user-select:none;
}
.chip:hover{transform: translateY(-1px); border-color: rgba(120,255,220,.35); background: rgba(255,255,255,.06)}
.chip:focus{outline:none}
.chip:focus-visible{box-shadow: 0 0 0 3px rgba(120,255,220,.22)}
.linkChip{display:inline-flex; align-items:center; text-decoration:none}

/* Tooltip (desktop hover) */
.chip[data-desc]:hover::after{
  content: attr(data-desc);
  position:absolute;
  left:50%;
  transform: translateX(-50%);
  bottom: calc(100% + 10px);
  width: min(320px, 70vw);
  padding:10px 12px;
  border-radius:14px;
  background: rgba(0,0,0,.65);
  border:1px solid rgba(255,255,255,.14);
  color: rgba(235,255,250,.96);
  font-weight:700;
  font-size:12.5px;
  line-height:1.45;
  backdrop-filter: blur(10px);
  box-shadow: 0 20px 60px rgba(0,0,0,.45);
  z-index:20;
}
.chip[data-desc]:hover::before{
  content:"";
  position:absolute;
  left:50%;
  transform: translateX(-50%);
  bottom: calc(100% + 2px);
  border:8px solid transparent;
  border-top-color: rgba(0,0,0,.65);
  filter: drop-shadow(0 2px 0 rgba(255,255,255,.08));
  z-index:21;
}

/* Tooltip (mobile click) */
.chip.isOpen::after{display:block}
.chip.isOpen::before{display:block}

.secLine{width:min(980px,92vw); height:1px; margin:34px auto 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.10), transparent)}

.noteBox{margin:26px auto 0; max-width:980px; border-radius:22px;
  border:1px solid rgba(255,255,255,.10); background: rgba(0,0,0,.22);
  padding:16px 18px}
.noteTitle{font-weight:900; margin-bottom:6px}
.noteText{color: rgba(255,255,255,.80); line-height:1.7}

/* Responsivo */
@media (max-width: 980px){
  .catGrid{grid-template-columns: 1fr}
  .secHead h2{font-size:30px}
}



/* =========================
   RECURSOS (PLUS) - somente este setor
   ========================= */
#recursos .secHead{margin-bottom:30px}
#recursos .kicker{
  background: linear-gradient(90deg, rgba(120,255,220,.12), rgba(110,160,255,.10));
  border-color: rgba(120,255,220,.18);
}
#recursos .catCard{
  background: radial-gradient(1200px 380px at 10% -10%, rgba(120,255,220,.12), transparent 55%),
              radial-gradient(900px 360px at 110% 10%, rgba(190,120,255,.12), transparent 55%),
              rgba(255,255,255,.035);
  border-color: rgba(255,255,255,.12);
}
#recursos .catTop{
  padding:6px 6px 14px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  margin-bottom: 14px;
}
#recursos .catTitle{
  display:flex; align-items:center; gap:10px;
}
#recursos .catTitle:before{
  content:"";
  width:10px; height:10px; border-radius:50%;
  background: linear-gradient(180deg, rgba(120,255,220,.95), rgba(110,160,255,.85));
  box-shadow: 0 10px 20px rgba(120,255,220,.18);
}
#recursos .chipGrid{gap:12px}
#recursos .chip{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:11px 14px;
  background: rgba(0,0,0,.18);
  border-color: rgba(255,255,255,.14);
}
#recursos .chip .ico{
  width:18px; height:18px; flex:0 0 18px;
  border-radius:10px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  box-shadow: 0 10px 26px rgba(0,0,0,.22);
  position:relative;
}
#recursos .chip .ico:after{
  content:"";
  position:absolute; inset:4px;
  background: rgba(235,255,250,.95);
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-size: contain;
          mask-repeat: no-repeat;
          mask-position: center;
  opacity:.95;
}
#recursos .chip .lbl{white-space:nowrap}
#recursos .chip:hover{
  border-color: rgba(120,255,220,.32);
  background: rgba(255,255,255,.06);
}
#recursos .chip:hover .ico{
  border-color: rgba(120,255,220,.30);
  box-shadow: 0 14px 34px rgba(120,255,220,.14);
}
#recursos .chip[data-ico="external"]{
  background: linear-gradient(90deg, rgba(120,255,220,.10), rgba(190,120,255,.08));
  border-color: rgba(120,255,220,.22);
}

/* Icon masks (SVG) */
#recursos .chip[data-ico="play"] .ico:after{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 7v10l8-5-8-5z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 7v10l8-5-8-5z'/%3E%3C/svg%3E");}
#recursos .chip[data-ico="refresh"] .ico:after{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.65 6.35A7.95 7.95 0 0012 4V1L7 6l5 5V7a5 5 0 11-5 5H5a7 7 0 107.75-6.9'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.65 6.35A7.95 7.95 0 0012 4V1L7 6l5 5V7a5 5 0 11-5 5H5a7 7 0 107.75-6.9'/%3E%3C/svg%3E");}
#recursos .chip[data-ico="moon"] .ico:after{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 12.8A8.5 8.5 0 1111.2 3a6.5 6.5 0 109.8 9.8z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 12.8A8.5 8.5 0 1111.2 3a6.5 6.5 0 109.8 9.8z'/%3E%3C/svg%3E");}
#recursos .chip[data-ico="image"] .ico:after{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 19V5a2 2 0 00-2-2H5a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2zM8 11l2.5 3 3.5-4.5L19 17H5l3-6z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 19V5a2 2 0 00-2-2H5a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2zM8 11l2.5 3 3.5-4.5L19 17H5l3-6z'/%3E%3C/svg%3E");}
#recursos .chip[data-ico="rss"] .ico:after{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.18 17.82A2.18 2.18 0 104 20a2.18 2.18 0 002.18-2.18zM4 4v3a13 13 0 0113 13h3C20 11.85 12.15 4 4 4zm0 7v3a6 6 0 016 6h3a9 9 0 00-9-9z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.18 17.82A2.18 2.18 0 104 20a2.18 2.18 0 002.18-2.18zM4 4v3a13 13 0 0113 13h3C20 11.85 12.15 4 4 4zm0 7v3a6 6 0 016 6h3a9 9 0 00-9-9z'/%3E%3C/svg%3E");}
#recursos .chip[data-ico="calendar"] .ico:after{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 2h2v2h6V2h2v2h3v18H4V4h3V2zm13 8H6v10h14V10z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 2h2v2h6V2h2v2h3v18H4V4h3V2zm13 8H6v10h14V10z'/%3E%3C/svg%3E");}
#recursos .chip[data-ico="users"] .ico:after{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16 11a4 4 0 10-8 0 4 4 0 008 0zM4 20a8 8 0 0116 0H4z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16 11a4 4 0 10-8 0 4 4 0 008 0zM4 20a8 8 0 0116 0H4z'/%3E%3C/svg%3E");}
#recursos .chip[data-ico="chat"] .ico:after{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 4h16v12H7l-3 3V4z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 4h16v12H7l-3 3V4z'/%3E%3C/svg%3E");}
#recursos .chip[data-ico="share"] .ico:after{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 16a3 3 0 00-2.4 1.2l-6.2-3.1a3 3 0 000-2.2l6.2-3.1A3 3 0 1015 6a3 3 0 00.1.7L9 9.8a3 3 0 100 4.4l6.1 3.1A3 3 0 1018 16z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 16a3 3 0 00-2.4 1.2l-6.2-3.1a3 3 0 000-2.2l6.2-3.1A3 3 0 1015 6a3 3 0 00.1.7L9 9.8a3 3 0 100 4.4l6.1 3.1A3 3 0 1018 16z'/%3E%3C/svg%3E");}
#recursos .chip[data-ico="heart"] .ico:after{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-7-4.6-9.3-9A5.6 5.6 0 0112 6a5.6 5.6 0 019.3 6c-2.3 4.4-9.3 9-9.3 9z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-7-4.6-9.3-9A5.6 5.6 0 0112 6a5.6 5.6 0 019.3 6c-2.3 4.4-9.3 9-9.3 9z'/%3E%3C/svg%3E");}
#recursos .chip[data-ico="mic"] .ico:after{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 14a3 3 0 003-3V5a3 3 0 10-6 0v6a3 3 0 003 3zm5-3a5 5 0 01-10 0H5a7 7 0 006 6.9V21h2v-3.1A7 7 0 0019 11h-2z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 14a3 3 0 003-3V5a3 3 0 10-6 0v6a3 3 0 003 3zm5-3a5 5 0 01-10 0H5a7 7 0 006 6.9V21h2v-3.1A7 7 0 0019 11h-2z'/%3E%3C/svg%3E");}
#recursos .chip[data-ico="chart"] .ico:after{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 9h3v10H5V9zm5-4h3v14h-3V5zm5 7h3v7h-3v-7z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 9h3v10H5V9zm5-4h3v14h-3V5zm5 7h3v7h-3v-7z'/%3E%3C/svg%3E");}
#recursos .chip[data-ico="wave"] .ico:after{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 10h2v4H3v-4zm4-3h2v10H7V7zm4 2h2v6h-2V9zm4-4h2v14h-2V5zm4 5h2v4h-2v-4z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 10h2v4H3v-4zm4-3h2v10H7V7zm4 2h2v6h-2V9zm4-4h2v14h-2V5zm4 5h2v4h-2v-4z'/%3E%3C/svg%3E");}
#recursos .chip[data-ico="phone"] .ico:after{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 2h10a2 2 0 012 2v16a2 2 0 01-2 2H7a2 2 0 01-2-2V4a2 2 0 012-2zm5 19a1.2 1.2 0 100-2.4 1.2 1.2 0 000 2.4z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 2h10a2 2 0 012 2v16a2 2 0 01-2 2H7a2 2 0 01-2-2V4a2 2 0 012-2zm5 19a1.2 1.2 0 100-2.4 1.2 1.2 0 000 2.4z'/%3E%3C/svg%3E");}
#recursos .chip[data-ico="shield"] .ico:after{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l8 4v6c0 5-3.4 9.7-8 10-4.6-.3-8-5-8-10V6l8-4z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l8 4v6c0 5-3.4 9.7-8 10-4.6-.3-8-5-8-10V6l8-4z'/%3E%3C/svg%3E");}
#recursos .chip[data-ico="external"] .ico:after{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 3h7v7h-2V6.4l-9.3 9.3-1.4-1.4L17.6 5H14V3zM5 5h7v2H7v10h10v-5h2v7H5V5z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 3h7v7h-2V6.4l-9.3 9.3-1.4-1.4L17.6 5H14V3zM5 5h7v2H7v10h10v-5h2v7H5V5z'/%3E%3C/svg%3E");}
#recursos .chip[data-ico="cog"] .ico:after{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19.4 13a7.7 7.7 0 000-2l2-1.5-2-3.5-2.3.6a7.4 7.4 0 00-1.7-1L15 3h-6l-.4 2.6a7.4 7.4 0 00-1.7 1L4.6 6 2.6 9.5l2 1.5a7.7 7.7 0 000 2l-2 1.5 2 3.5 2.3-.6a7.4 7.4 0 001.7 1L9 21h6l.4-2.6a7.4 7.4 0 001.7-1l2.3.6 2-3.5-2-1.5zM12 15.5A3.5 3.5 0 1112 8a3.5 3.5 0 010 7.5z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19.4 13a7.7 7.7 0 000-2l2-1.5-2-3.5-2.3.6a7.4 7.4 0 00-1.7-1L15 3h-6l-.4 2.6a7.4 7.4 0 00-1.7 1L4.6 6 2.6 9.5l2 1.5a7.7 7.7 0 000 2l-2 1.5 2 3.5 2.3-.6a7.4 7.4 0 001.7 1L9 21h6l.4-2.6a7.4 7.4 0 001.7-1l2.3.6 2-3.5-2-1.5zM12 15.5A3.5 3.5 0 1112 8a3.5 3.5 0 010 7.5z'/%3E%3C/svg%3E");}
#recursos .chip[data-ico="palette"] .ico:after{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3a9 9 0 100 18h4a3 3 0 000-6h-1a1.5 1.5 0 010-3h3a3 3 0 000-6h-6zM7.5 12A1.5 1.5 0 117.5 9 1.5 1.5 0 017.5 12zm3-4A1.5 1.5 0 1110.5 5 1.5 1.5 0 0110.5 8zm3 0A1.5 1.5 0 1113.5 5 1.5 1.5 0 0113.5 8z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3a9 9 0 100 18h4a3 3 0 000-6h-1a1.5 1.5 0 010-3h3a3 3 0 000-6h-6zM7.5 12A1.5 1.5 0 117.5 9 1.5 1.5 0 017.5 12zm3-4A1.5 1.5 0 1110.5 5 1.5 1.5 0 0110.5 8zm3 0A1.5 1.5 0 1113.5 5 1.5 1.5 0 0113.5 8z'/%3E%3C/svg%3E");}
#recursos .chip[data-ico="link"] .ico:after{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10.6 13.4a1 1 0 001.4 1.4l3.6-3.6a3 3 0 10-4.2-4.2L9.9 8.5a1 1 0 001.4 1.4l1.5-1.5a1 1 0 011.4 1.4l-3.6 3.6zM13.4 10.6a1 1 0 00-1.4-1.4l-3.6 3.6a3 3 0 104.2 4.2l1.5-1.5a1 1 0 00-1.4-1.4l-1.5 1.5a1 1 0 01-1.4-1.4l3.6-3.6z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10.6 13.4a1 1 0 001.4 1.4l3.6-3.6a3 3 0 10-4.2-4.2L9.9 8.5a1 1 0 001.4 1.4l1.5-1.5a1 1 0 011.4 1.4l-3.6 3.6zM13.4 10.6a1 1 0 00-1.4-1.4l-3.6 3.6a3 3 0 104.2 4.2l1.5-1.5a1 1 0 00-1.4-1.4l-1.5 1.5a1 1 0 01-1.4-1.4l3.6-3.6z'/%3E%3C/svg%3E");}
#recursos .chip[data-ico="spark"] .ico:after{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l1.2 6.2L20 10l-6.8 1.8L12 18l-1.2-6.2L4 10l6.8-1.8L12 2z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l1.2 6.2L20 10l-6.8 1.8L12 18l-1.2-6.2L4 10l6.8-1.8L12 2z'/%3E%3C/svg%3E");}
#recursos .chip[data-ico="list"] .ico:after{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 6h2v2H4V6zm4 0h12v2H8V6zM4 11h2v2H4v-2zm4 0h12v2H8v-2zM4 16h2v2H4v-2zm4 0h12v2H8v-2z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 6h2v2H4V6zm4 0h12v2H8V6zM4 11h2v2H4v-2zm4 0h12v2H8v-2zM4 16h2v2H4v-2zm4 0h12v2H8v-2z'/%3E%3C/svg%3E");}
#recursos .chip[data-ico="toggle"] .ico:after{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17 7H7a5 5 0 000 10h10a5 5 0 000-10zm0 8a3 3 0 110-6 3 3 0 010 6z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17 7H7a5 5 0 000 10h10a5 5 0 000-10zm0 8a3 3 0 110-6 3 3 0 010 6z'/%3E%3C/svg%3E");}
#recursos .chip[data-ico="robot"] .ico:after{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 2h2v2h3a4 4 0 014 4v7a6 6 0 01-6 6H10a6 6 0 01-6-6V8a4 4 0 014-4h3V2zm-4 8a1 1 0 100 2 1 1 0 000-2zm10 0a1 1 0 100 2 1 1 0 000-2z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 2h2v2h3a4 4 0 014 4v7a6 6 0 01-6 6H10a6 6 0 01-6-6V8a4 4 0 014-4h3V2zm-4 8a1 1 0 100 2 1 1 0 000-2zm10 0a1 1 0 100 2 1 1 0 000-2z'/%3E%3C/svg%3E");}
#recursos .chip[data-ico="app"] .ico:after{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 2h10a2 2 0 012 2v16a2 2 0 01-2 2H7a2 2 0 01-2-2V4a2 2 0 012-2zm0 3v14h10V5H7z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 2h10a2 2 0 012 2v16a2 2 0 01-2 2H7a2 2 0 01-2-2V4a2 2 0 012-2zm0 3v14h10V5H7z'/%3E%3C/svg%3E");}
#recursos .chip[data-ico="plug"] .ico:after{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 2h2v6h6V2h2v6h3v4h-3v3a5 5 0 01-10 0v-3H4V8h3V2z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 2h2v6h6V2h2v6h3v4h-3v3a5 5 0 01-10 0v-3H4V8h3V2z'/%3E%3C/svg%3E");}
#recursos .chip[data-ico="lock"] .ico:after{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17 10h-1V8a4 4 0 00-8 0v2H7a2 2 0 00-2 2v8a2 2 0 002 2h10a2 2 0 002-2v-8a2 2 0 00-2-2zm-7 0V8a2 2 0 114 0v2h-4z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17 10h-1V8a4 4 0 00-8 0v2H7a2 2 0 00-2 2v8a2 2 0 002 2h10a2 2 0 002-2v-8a2 2 0 00-2-2zm-7 0V8a2 2 0 114 0v2h-4z'/%3E%3C/svg%3E");}
#recursos .chip[data-ico="badge"] .ico:after{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l3 5 5 1-3.5 4.2.8 5.8L12 16.8 6.7 18 7.5 12.2 4 8l5-1 3-5z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l3 5 5 1-3.5 4.2.8 5.8L12 16.8 6.7 18 7.5 12.2 4 8l5-1 3-5z'/%3E%3C/svg%3E");}
#recursos .chip[data-ico="layers"] .ico:after{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3l9 6-9 6-9-6 9-6zm0 10l9 6-9 6-9-6 9-6z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3l9 6-9 6-9-6 9-6zm0 10l9 6-9 6-9-6 9-6z'/%3E%3C/svg%3E");}
#recursos .chip[data-ico="rules"] .ico:after{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 2h10v2H7V2zM5 6h14v16H5V6zm3 3v2h8V9H8zm0 4v2h8v-2H8z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 2h10v2H7V2zM5 6h14v16H5V6zm3 3v2h8V9H8zm0 4v2h8v-2H8z'/%3E%3C/svg%3E");}
#recursos .chip[data-ico="usersPlus"] .ico:after{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15 12a4 4 0 10-8 0 4 4 0 008 0zM3 22a8 8 0 0116 0H3zm17-9v-2h2V9h-2V7h-2v2h-2v2h2v2h2z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15 12a4 4 0 10-8 0 4 4 0 008 0zM3 22a8 8 0 0116 0H3zm17-9v-2h2V9h-2V7h-2v2h-2v2h2v2h2z'/%3E%3C/svg%3E");}

/* Mobile: permitir quebra bonita dos textos */
@media (max-width: 520px){
  #recursos .chip .lbl{white-space:normal}
}


/* =========================
   AJUSTE: ÍCONES DOS RECURSOS (MAIORES + SEM CAIXINHA)
   ========================= */
#recursos .chip .ico{
  width:26px; height:26px; flex:0 0 26px;
  border-radius:0;
  background: transparent;
  border: 0;
  box-shadow: none;
}
#recursos .chip .ico:after{
  inset:0;
  opacity:1;
  background: linear-gradient(180deg, rgba(120,255,220,.95), rgba(110,160,255,.90));
}
#recursos .chip:hover .ico:after{
  background: linear-gradient(180deg, rgba(190,120,255,.95), rgba(120,255,220,.92));
}


/* Ajuste solicitado: reduzir vão antes da seção Recursos */
#recursos.section{padding-top:36px;}

/* Painel admin preview */
.mediaBlock{margin-top:22px; display:flex; justify-content:center;}
.mediaCard.noLink{cursor:default; text-decoration:none;}
.mediaCard.noLink:hover{transform:none;}


/* =========================
   ADMIN PREVIEW (CALLOUTS) - venda "plus"
   ========================= */
.shot{position:relative;border-radius:22px;overflow:hidden;border:1px solid rgba(255,255,255,.08);background:rgba(10,14,22,.45);box-shadow:0 18px 60px rgba(0,0,0,.45);}
.shot img{display:block;width:100%;height:auto;filter:saturate(1.05) contrast(1.02);}
.shotLegend{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:14px}
.tagMini{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.10);background:rgba(15,18,26,.55);color:rgba(255,255,255,.86);font-weight:600;font-size:12.5px;letter-spacing:.2px}
.tagMini:before{content:"";width:8px;height:8px;border-radius:50%;background:linear-gradient(180deg, rgba(120,255,220,.9), rgba(110,160,255,.85));box-shadow:0 0 0 3px rgba(120,255,220,.12)}

.shotCallouts{position:absolute;inset:0;pointer-events:none}
.cDot{position:absolute;width:14px;height:14px;border-radius:50%;
  background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.95), rgba(255,255,255,.15));
  box-shadow:0 0 0 4px rgba(120,255,220,.12), 0 0 22px rgba(120,255,220,.28);
}
.cDot:after{content:"";position:absolute;inset:3px;border-radius:50%;
  background:linear-gradient(180deg, rgba(120,255,220,.95), rgba(110,160,255,.90));
}
.cLab{position:absolute;min-width:170px;max-width:220px;padding:10px 12px;border-radius:14px;
  border:1px solid rgba(255,255,255,.10);background:rgba(10,12,18,.62);
  backdrop-filter: blur(10px);
  box-shadow:0 12px 30px rgba(0,0,0,.35);
  color:rgba(255,255,255,.92);
}
.cLab b{display:block;font-size:13.5px;line-height:1.1;letter-spacing:.2px}
.cLab span{display:block;margin-top:4px;font-size:12px;color:rgba(255,255,255,.72)}
.cLine{position:absolute;display:block;height:1px;background:linear-gradient(90deg, rgba(120,255,220,.0), rgba(120,255,220,.55), rgba(110,160,255,.55), rgba(110,160,255,.0));
  opacity:.9;filter:drop-shadow(0 2px 10px rgba(120,255,220,.25));
}

/* Positions (percent-based, responsive) */
.shot--admin .cDot--visitas{left:34%; top:20%;}
.shot--admin .cLab--visitas{left:6%; top:15%;}
.shot--admin .cLine--visitas{left:12%; top:21%; width:22%; transform:translateY(-50%);}

.shot--admin .cDot--reais{left:34%; top:33%;}
.shot--admin .cLab--reais{left:6%; top:28%;}
.shot--admin .cLine--reais{left:12%; top:34%; width:22%; transform:translateY(-50%);}

.shot--admin .cDot--android{left:34%; top:46%;}
.shot--admin .cLab--android{left:6%; top:41%;}
.shot--admin .cLine--android{left:12%; top:47%; width:22%; transform:translateY(-50%);}

.shot--admin .cDot--multi{left:34%; top:59%;}
.shot--admin .cLab--multi{left:6%; top:54%;}
.shot--admin .cLine--multi{left:12%; top:60%; width:22%; transform:translateY(-50%);}

.shot--admin .cDot--ouvintes{left:52%; top:36%;}
.shot--admin .cLab--ouvintes{left:58%; top:14%;}
.shot--admin .cLine--ouvintes{left:52%; top:36%; width:16%; transform:rotate(-28deg); transform-origin:left center;}

.shot--admin .cDot--grafico{left:76%; top:36%;}
.shot--admin .cLab--grafico{left:72%; top:9%;}
.shot--admin .cLine--grafico{left:76%; top:36%; width:10%; transform:rotate(-55deg); transform-origin:left center;}

/* Mobile: hide overlay (avoid poluir) and keep legend only */
@media (max-width: 720px){
  .shotCallouts{display:none;}
}

/* App showcase (screenshots) */
.appShots{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
  margin-top:18px;
  max-width:760px;          /* keeps screenshots compact */
  margin-left:auto;
  margin-right:auto;
  justify-items:center;
}
.appShot{
  margin:0;
  padding:14px;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(10,12,18,.38);
  backdrop-filter: blur(10px);
  box-shadow:0 16px 55px rgba(0,0,0,.35);
  display:flex;
  flex-direction:column;
  align-items:center;
}
.appShot img{
  width:min(280px, 100%);   /* smaller thumbnails (desktop + mobile) */
  max-height:520px;         /* avoids huge scroll */
  height:auto;
  display:block;
  border-radius:18px;
  object-fit:contain;
}
.appShot figcaption{margin-top:10px; font-size:13px; color:rgba(255,255,255,.78); display:flex; gap:8px; align-items:center}
.appShot figcaption::before{content:""; width:9px; height:9px; border-radius:999px; background:linear-gradient(90deg,var(--g2),var(--g3)); box-shadow:0 0 0 4px rgba(120,255,220,.10)}
@media (max-width: 900px){
  .appShots{grid-template-columns:1fr}
}


/* v3.5.16 - ajustes seção Valor (centralizar título + destacar preço antigo) */
#valor .head{ text-align:center; }
#valor .head .muted{ margin-left:auto; margin-right:auto; }
.promoFromPrice{ font-size:24px; font-weight:800; letter-spacing:.2px; }

