.planos-live{
  --accent:      #14017d;
  --destaque:    #f2711c;
  --card-bg:     #ffffff;
  --text:        #2b2b2b;
  --muted:       #7a7a7a;
  --line:        #e7e7e7;

  --card-min:    280px;
  --card-max:    360px;
  --radius:      16px;
  --pad:         18px;
  --gap:         22px;

  --title-size:  38px;
  --subtitle-size: 12px;
  --price-size:  20px;
  --total-size:  16px;

  --logo:        32px;
  --logo-inc:    52px;
  --modal-img:   34px;

  --btn-pad-y:   10px;
  --btn-radius:  999px;
  --title-align: center;
  --section-title-size: 12px;
  --label-size:  11px;
}

.planos-live{
  display:flex;
  flex-wrap:wrap;
  gap:var(--gap);
  justify-content:center;
  align-items:flex-start;
  width:100%;
  padding-top:16px;
  font-family:Arial,Helvetica,sans-serif;
}

.planos-live *,
.planos-live *::before,
.planos-live *::after{
  box-sizing:border-box;
}

.planos-live .plano{
  position:relative;
  flex:1 1 var(--card-min);
  min-width:0;
  max-width:var(--card-max);

  background:
    linear-gradient(180deg,#ffffff 0%,#ffffff 82%,#fbfbfd 100%);

  border:1px solid #ececf3;
  border-radius:var(--radius);
  padding:var(--pad);

  color:var(--text);

  display:flex;
  flex-direction:column;

  box-shadow:
    0 8px 24px rgba(28,26,62,.09);

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

.planos-live .plano:hover{
  transform:translateY(-3px);
  border-color:rgba(20,1,125,.18);
  box-shadow:
    0 13px 30px rgba(28,26,62,.13);
}

.planos-live .total-wrap{
  margin-top:auto;
}

.planos-live .plano--destaque{
  border-color:var(--destaque);
  box-shadow:
    0 10px 28px rgba(242,113,28,.17);
}

.planos-live .plano[data-badge]::before{
  content:attr(data-badge);

  position:absolute;
  top:-14px;
  left:50%;
  transform:translateX(-50%);

  background:
    linear-gradient(135deg,#ff8a26,var(--destaque));

  color:#fff;

  font-size:12px;
  font-weight:900;
  letter-spacing:.5px;

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

  white-space:nowrap;

  box-shadow:
    0 5px 14px rgba(242,113,28,.28);
}

.planos-live .plano--destaque .btn-plano{
  background:
    linear-gradient(135deg,#ff8a26,var(--destaque));
}

.planos-live .plano--gamer{
  background:
    linear-gradient(160deg,#14103a 0%,#251349 100%);

  border-color:#6d4bff;

  box-shadow:
    0 12px 30px rgba(109,75,255,.25);
}

.planos-live .plano--gamer .titulo-plano{
  color:#00e5ff;
}

.planos-live .plano--gamer .subtitulo-plano{
  color:#b6aee0;
}

.planos-live .plano--gamer .preco-base,
.planos-live .plano--gamer .preco-num,
.planos-live .plano--gamer .preco-suf{
  color:#fff;
}

.planos-live .plano--gamer .incluidos,
.planos-live .plano--gamer .adicional{
  background:rgba(255,255,255,.07);
  border-color:rgba(255,255,255,.17);
}

.planos-live .plano--gamer .incluidos-titulo,
.planos-live .plano--gamer .secao-titulo,
.planos-live .plano--gamer .incluido,
.planos-live .plano--gamer .incluido-ou{
  color:#cdc6ef;
}

.planos-live .plano--gamer .nome{
  color:#fff;
}

.planos-live .plano--gamer .logo,
.planos-live .plano--gamer .logo-inc{
  background:#fff;
  border-radius:8px;
  padding:3px;
}

.planos-live .plano--gamer .saiba-mais{
  color:#a79fd6;
}

.planos-live .plano--gamer .saiba-mais:hover,
.planos-live .plano--gamer .saiba-mais:focus{
  color:#fff;
}

.planos-live .plano--gamer .switch input:checked + .slider{
  background:#00e5ff;
}

.planos-live .plano--gamer .total-wrap{
  border-top-color:rgba(255,255,255,.25);
}

.planos-live .plano--gamer .total{
  color:#fff;
}

.planos-live .plano--gamer .btn-plano{
  background:
    linear-gradient(135deg,#5b38db,#7d5cff);
}

.planos-live .titulo-plano{
  display:block;
  visibility:visible;
  opacity:1;

  text-align:var(--title-align);

  color:var(--accent);

  font-weight:900;
  font-size:clamp(26px,7vw,var(--title-size));
  line-height:1.05;

  margin:0 0 6px;
  padding:0;

  font-family:inherit;

  text-transform:none;
  letter-spacing:-.6px;

  background:transparent;
  text-shadow:none;

  overflow-wrap:break-word;
}

.planos-live .subtitulo-plano{
  display:block;

  text-align:var(--title-align);

  color:var(--muted);

  font-size:var(--subtitle-size);
  font-weight:500;
  line-height:1.3;

  margin:0 0 10px;
  padding:0;

  background:transparent;
}

.planos-live .preco-base{
  display:block;

  text-align:var(--title-align);

  color:var(--accent);
  font-weight:900;

  margin:0 0 14px;
  padding:0;

  white-space:nowrap;
}

.planos-live .preco-num{
  font-size:var(--price-size);
  font-weight:900;
  color:var(--accent);
}

.planos-live .preco-suf{
  font-size:16px;
  font-weight:900;
  color:var(--accent);
}

.planos-live .preco-base::after{
  content:"";
  display:block;
  width:42px;
  height:3px;
  margin:10px auto 0;
  border-radius:999px;
  background:
    linear-gradient(90deg,var(--accent),#6047ff);
  opacity:.9;
}

.planos-live .incluidos{
  border:1px solid #e7e8ef;

  padding:12px;

  border-radius:12px;

  background:
    linear-gradient(180deg,#fbfbfd,#f7f7fa);

  margin-bottom:12px;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.8);
}

.planos-live .incluidos-titulo{
  font-size:var(--label-size);
  font-weight:900;

  color:#4a4a4a;

  margin:0 0 10px;

  text-align:center;
  line-height:1.3;

  letter-spacing:.25px;
}

.planos-live .incluidos-itens{
  display:flex;
  gap:10px;
  justify-content:center;
  align-items:flex-start;
  flex-wrap:wrap;
}

.planos-live .incluido{
  width:82px;

  text-align:center;

  font-size:11px;
  color:var(--muted);
  font-weight:700;
}

.planos-live .incluido-nome{
  margin-top:4px;
  line-height:1.2;
}

.planos-live .incluido-ou{
  align-self:center;

  font-size:11px;
  font-weight:700;

  color:var(--muted);

  padding-bottom:14px;
}

.planos-live .logo-inc{
  width:var(--logo-inc);
  height:var(--logo-inc);

  object-fit:contain;

  display:block;

  margin:0 auto;

  padding:4px;

  background:#fff;

  border:1px solid #eeeeF4;
  border-radius:10px;

  box-shadow:
    0 4px 10px rgba(30,31,55,.06);
}

.planos-live .secao-titulo{
  font-size:var(--section-title-size);
  font-weight:900;

  color:#4a4a4a;

  margin:8px 0 6px;

  text-transform:uppercase;
}

.planos-live .adicional{
  border:1px solid var(--line);

  border-radius:12px;

  padding:10px;

  margin-bottom:10px;

  background:#fff;

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

.planos-live .adicional:hover{
  border-color:rgba(20,1,125,.20);

  box-shadow:
    0 5px 14px rgba(22,22,55,.055);

  transform:translateY(-1px);
}

.planos-live .adicional-linha{
  display:flex;
  align-items:center;
  gap:8px;
}

.planos-live .logo{
  width:var(--logo);
  height:var(--logo);

  object-fit:contain;

  display:block;
  flex:0 0 auto;

  padding:2px;

  border-radius:7px;
}

.planos-live .nome{
  flex:1 1 auto;
  min-width:0;

  font-weight:800;

  color:#3b3b3b;

  font-size:14px;
  line-height:1.2;
}

.planos-live .preco{
  color:var(--accent);

  font-weight:900;
  font-size:13px;
}



.planos-live .saiba-mais{
  display:block;

  width:100%;

  margin-top:6px;

  padding:0 0 0 calc(var(--logo) + 8px);

  background:transparent;

  border:0;
  box-shadow:none;
  outline:none;

  color:var(--muted);

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

  font-family:inherit;

  text-align:left;

  cursor:pointer;

  text-decoration:none;

  -webkit-appearance:none;
  appearance:none;
}

.planos-live .saiba-mais--centro{
  padding-left:0;

  text-align:center;

  margin-top:10px;
}

.planos-live .saiba-mais:visited{
  color:var(--muted);
}

.planos-live .saiba-mais:hover,
.planos-live .saiba-mais:focus,
.planos-live .saiba-mais:active{
  background:transparent;

  color:var(--accent);

  box-shadow:none;
  outline:none;
}

.planos-live .saiba-mais:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}

.planos-live .switch{
  position:relative;

  width:40px;
  height:22px;

  flex:0 0 auto;
}

.planos-live .switch input{
  position:absolute;

  opacity:0;

  width:0;
  height:0;
}

.planos-live .slider{
  position:absolute;
  inset:0;

  background:#d6d6d6;

  border-radius:999px;

  transition:.2s;

  cursor:pointer;
}

.planos-live .slider::before{
  content:"";

  width:18px;
  height:18px;

  background:#fff;

  border-radius:50%;

  position:absolute;

  top:2px;
  left:2px;

  transition:.2s;

  box-shadow:
    0 2px 5px rgba(0,0,0,.20);
}

.planos-live .switch input:checked + .slider{
  background:
    linear-gradient(135deg,#3114bf,var(--accent));
}

.planos-live .plano--destaque .switch input:checked + .slider{
  background:var(--destaque);
}

.planos-live .switch input:checked + .slider::before{
  transform:translateX(18px);
}

.planos-live .switch input:focus-visible + .slider{
  outline:2px solid var(--accent);
  outline-offset:2px;
}

.planos-live .total-wrap{
  text-align:center;

  border-top:1px dashed var(--line);

  padding-top:10px;
}

.planos-live .total{
  font-weight:900;

  font-size:var(--total-size);

  margin:10px 0;

  color:#3a3a3a;
}

.planos-live .total-price{
  color:var(--accent);
}

.planos-live .btn-plano{
  background:
    linear-gradient(135deg,#3114bf,var(--accent));

  color:#fff;

  padding:var(--btn-pad-y) 20px;

  border-radius:var(--btn-radius);

  font-weight:900;

  text-transform:uppercase;

  text-decoration:none;

  display:inline-block;

  margin-top:4px;

  font-size:14px;

  box-shadow:
    0 7px 16px rgba(20,1,125,.18);

  transition:
    transform .16s ease,
    filter .16s ease,
    box-shadow .16s ease;
}

.planos-live .btn-plano:hover{
  transform:translateY(-1px);

  filter:brightness(1.08);

  box-shadow:
    0 9px 20px rgba(20,1,125,.23);
}

.modal-bg{
  position:fixed;
  inset:0;

  background:rgba(0,0,0,.58);

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

  z-index:999999;

  padding:16px;

  backdrop-filter:blur(4px);
}

.modal-bg.open{
  display:flex;
}

.modal{
  background:#fff;

  padding:18px;

  border-radius:16px;

  max-width:460px;
  width:100%;

  max-height:80vh;

  overflow-y:auto;

  position:relative;

  font-family:Arial,Helvetica,sans-serif;

  box-shadow:
    0 24px 60px rgba(0,0,0,.26);
}

.modal-close{
  position:absolute;

  top:6px;
  right:10px;

  background:transparent;

  border:none;

  font-size:26px;
  line-height:1;

  cursor:pointer;

  color:#666;
}

.modal-head{
  display:flex;
  gap:10px;
  align-items:center;

  padding-right:28px;
}

.modal-img{
  width:34px;
  height:34px;

  object-fit:contain;

  border-radius:10px;

  display:block;

  flex:0 0 auto;
}

.modal-title{
  font-weight:900;

  font-size:16px;

  color:#222;
}

.modal-desc{
  margin-top:10px;

  color:#4a4a4a;

  font-size:14px;
  line-height:1.5;

  white-space:pre-line;
}

.modal-actions{
  margin-top:14px;

  text-align:right;
}

.modal-ok{
  background:
    linear-gradient(135deg,#3114bf,#14017d);

  color:#fff;

  padding:9px 16px;

  border-radius:10px;

  font-weight:900;

  cursor:pointer;

  border:none;

  font-size:14px;
}

@media(max-width:700px){

  .planos-live{
    --gap:26px;
  }

  .planos-live .plano{
    flex:1 1 100%;
    max-width:420px;
  }

}

@media(prefers-reduced-motion:reduce){

  .planos-live .plano,
  .planos-live .adicional,
  .planos-live .slider,
  .planos-live .slider::before,
  .planos-live .btn-plano{
    transition:none;
  }

}
.planos-live .plano--gamer .total-price,
.planos-live .plano--gamer .valor-total,
.planos-live .plano--gamer .total-suf{
  color:#fff;
}