/* v2.css — estilos exclusivos da versão 2
   Carregado por último, depois de styles/sections/mockups.css.
   Nada aqui afeta a versão original (pasta de cima). */

/* =========================================================
   1) Selo "Tecnologia do grupo FácilZap" sobre o celular
   ========================================================= */
.hero-visual--stack{
  flex-direction:column;
  gap:22px;
}

.tech-badge{
  position:relative;               /* fica acima do .hero-glow */
  z-index:2;
  display:inline-flex;align-items:center;gap:11px;
  padding:12px 24px;border-radius:999px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(95,233,193,.3);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  box-shadow:0 8px 28px -12px rgba(0,0,0,.6);
  white-space:nowrap;
}
.tech-badge__label{
  font-size:17px;font-weight:400;
  color:rgba(255,255,255,.72);
  letter-spacing:.01em;
}
/* a logo oficial já vem no turquesa da marca e com fundo transparente */
.tech-badge__logo{
  height:26px;width:auto;
  align-self:center;
  filter:drop-shadow(0 0 18px rgba(0,206,201,.35));
}

@media(max-width:640px){
  .tech-badge{padding:10px 20px;gap:7px}
  .tech-badge__label{font-size:14px}
  .tech-badge__logo{height:21px}
}

/* =========================================================
   1b) Logo da LUE no nav e no rodapé
   Substitui o quadrado desenhado em CSS (.nav-logo .mark).
   ========================================================= */
.nav-logo .mark-img{
  width:30px;height:30px;
  object-fit:contain;
  flex:0 0 auto;
  filter:drop-shadow(0 6px 16px rgba(124,58,237,.55));
}
.footer .nav-logo .mark-img{width:28px;height:28px}

/* Foto real do produto no card do chat.
   O ::after do styles.css é um brilho por cima do placeholder antigo;
   com foto de verdade ele suja a imagem, então some. */
.bubble.card .cardimg{height:186px;background:#EFEAF6}
.bubble.card .cardimg::after{display:none}
.cardimg__foto{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;object-position:center 42%;
}

/* =========================================================
   2) Seção do vídeo
   ========================================================= */
.section-video{
  padding:68px 0 110px;
  background:#fff;
  border-bottom:1px solid var(--rule,#E5E1DA);
}
@media(max-width:700px){.section-video{padding:46px 0 72px}}

.video-head{max-width:840px;margin:0 auto 44px;text-align:center}
.video-head h2{
  font-size:clamp(38px,5.2vw,64px);
  letter-spacing:-.03em;line-height:1.02;margin:0;
}
.video-head .lede{
  color:var(--muted);font-size:clamp(16px,1.6vw,19px);
  margin-top:18px;line-height:1.55;
}

/* ---------- abas: os dois pontos de vista ----------
   folga em CIMA: ficam abaixo da moldura, não acima */
.video-tabs{
  display:flex;justify-content:center;gap:10px;
  margin:22px auto 0;flex-wrap:wrap;
}
.video-tab{
  padding:11px 22px;border-radius:999px;cursor:pointer;
  font-size:15px;font-weight:600;letter-spacing:-.01em;
  color:var(--muted);
  background:#fff;
  border:1px solid var(--rule,#E5E1DA);
  transition:background .2s ease,color .2s ease,border-color .2s ease,box-shadow .2s ease;
}
.video-tab:hover{color:var(--ink);border-color:#D8D0E6}
.video-tab:focus-visible{outline:2px solid var(--primary,#7C3AED);outline-offset:3px}
.video-tab.is-on{
  color:#fff;
  background:var(--primary,#7C3AED);
  border-color:transparent;
  box-shadow:0 10px 24px -10px rgba(124,58,237,.7);
}

.video-frame{
  position:relative;
  max-width:900px;margin:0 auto;
  aspect-ratio:16/9;
  border-radius:20px;
  overflow:hidden;
  background:linear-gradient(160deg,#1E1B4B 0%,#0F0A1F 100%);
  box-shadow:
    0 0 0 1px rgba(124,58,237,.22),
    0 40px 80px -40px rgba(46,16,101,.55);
  /* perspective vai no PAI; quem gira é o filho. Valor conservador pra
     aresta próxima não estourar a moldura e ser cortada em reto. */
  perspective:1200px;
}

/* a IFrame API injeta o <iframe> dentro desta vaga.
   Nunca recebe transform: girar iframe cross-origin dá flash preto,
   borra o vídeo e quebra o clique nos controles do player. */
.video-frame__slot{
  position:absolute;inset:0;
  opacity:1;transition:opacity .2s ease;
}
.video-frame__slot.is-oculto{opacity:0;pointer-events:none}
.video-frame__slot iframe,
.video-frame__slot > div{
  width:100%;height:100%;border:0;display:block;
}

/* ---------- painel que gira ----------
   Irmão do slot, nunca filho. Opaco, com a thumb do vídeo como face,
   senão o giro fica invisível contra o fundo.
   Sem preserve-3d e sem backface-visibility de propósito: são as duas
   propriedades que deixam iframe cross-origin em branco no iOS. */
.video-frame__flip{
  position:absolute;inset:0;z-index:4;
  border-radius:20px;          /* repetido: o clip do pai não é confiável
                                  sobre camada composta durante animação */
  background-color:#0F0A1F;
  background-size:cover;background-position:center;
  transform:none;              /* em repouso, transform de verdade nenhum */
}
.video-frame__flip::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(180deg,rgba(15,10,31,.25),rgba(15,10,31,.6));
}
.video-frame__flip.is-saindo{
  animation:lueGiroSaida .3s cubic-bezier(.5,0,.75,0) forwards;
  will-change:transform;
}
.video-frame__flip.is-entrando{
  animation:lueGiroEntrada .3s cubic-bezier(.25,1,.5,1) forwards;
  will-change:transform;
}
@keyframes lueGiroSaida{
  from{transform:rotateY(0)}
  to  {transform:rotateY(90deg)}
}
@keyframes lueGiroEntrada{
  from{transform:rotateY(-90deg)}
  to  {transform:rotateY(0)}
}

/* Estado com vídeo, antes do clique */
.video-frame__poster{
  position:absolute;inset:0;
  width:100%;height:100%;
  border:0;padding:0;margin:0;cursor:pointer;
  background-size:cover;background-position:center;
  display:flex;align-items:center;justify-content:center;
}
.video-frame__poster::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(15,10,31,.15) 0%,rgba(15,10,31,.55) 100%);
  transition:background .25s ease;
}
.video-frame__poster:hover::after{background:linear-gradient(180deg,rgba(15,10,31,.05) 0%,rgba(15,10,31,.45) 100%)}
.video-play{
  position:relative;z-index:2;
  display:grid;place-items:center;
  width:76px;height:76px;border-radius:50%;
  color:#fff;
  background:var(--primary,#7C3AED);
  box-shadow:0 12px 36px -10px rgba(124,58,237,.8);
  transition:transform .22s ease,box-shadow .22s ease;
  padding-left:4px;                 /* centra o triângulo opticamente */
}
.video-frame__poster:hover .video-play{
  transform:scale(1.07);
  box-shadow:0 16px 44px -10px rgba(124,58,237,.95);
}
.video-play--idle{
  background:rgba(255,255,255,.09);
  border:1px solid rgba(196,181,253,.25);
  color:rgba(196,181,253,.85);
  box-shadow:none;
}

/* Estado sem vídeo — espaço reservado */
.video-frame__empty{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:6px;text-align:center;padding:24px;
}
.video-frame__empty::before{
  content:"";position:absolute;inset:14px;
  border:1.5px dashed rgba(196,181,253,.22);
  border-radius:14px;pointer-events:none;
}
.video-frame__empty-title{
  margin:18px 0 0;
  font-size:16px;font-weight:600;color:rgba(255,255,255,.9);
}
.video-frame__empty-hint{
  margin:0;max-width:420px;
  font-size:13.5px;line-height:1.6;color:rgba(255,255,255,.45);
}
.video-frame__empty-hint code{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:12.5px;color:#C4B5FD;
  background:rgba(196,181,253,.1);
  padding:2px 6px;border-radius:5px;
}

.video-foot{
  text-align:center;margin:20px 0 0;
  font-size:14.5px;color:var(--muted);
}
.video-foot a{color:var(--primary);font-weight:500}
.video-foot a:hover{text-decoration:underline}

/* =========================================================
   3) Funcionalidades — rail navegável + painel que troca

   A seção imita o próprio produto: o menu lateral da LUE vira
   a navegação, e o painel à direita é a "tela". Fundo escuro
   de propósito — quebra a sequência de seções claras e faz o
   print (UI clara) brilhar como tela acesa.
   ========================================================= */
.section-funcs{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  padding:82px 0 130px;
  color:#fff;
  background:
    radial-gradient(70% 55% at 8% 0%,rgba(124,58,237,.30),transparent 62%),
    radial-gradient(55% 45% at 96% 22%,rgba(167,139,250,.20),transparent 60%),
    linear-gradient(180deg,#0B0716 0%,#160D2E 52%,#0D0820 100%);
}
@media(max-width:760px){.section-funcs{padding:50px 0 82px}}

/* malha fina de fundo, some nas bordas */
.section-funcs::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(72% 62% at 50% 34%,#000 22%,transparent 78%);
  -webkit-mask-image:radial-gradient(72% 62% at 50% 34%,#000 22%,transparent 78%);
}
.funcs-aura{
  position:absolute;z-index:-1;pointer-events:none;
  width:min(880px,92vw);aspect-ratio:1;
  right:-14%;top:26%;
  background:radial-gradient(circle,rgba(124,58,237,.28),transparent 62%);
  filter:blur(46px);
}

/* mais largo que o .wrap padrão (1200px): com rail + texto + imagem,
   1200 espremia as três colunas e a imagem saía menor que antes */
.funcs-wrap{position:relative;max-width:1560px}

/* ---------- cabeçalho ---------- */
.funcs-head{max-width:720px;margin:0 0 60px}
.funcs-eyebrow{
  display:flex;align-items:center;gap:14px;margin:0 0 20px;
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:11.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:#C4B5FD;
}
.funcs-eyebrow__bar{
  width:40px;height:1px;flex:0 0 40px;
  background:linear-gradient(90deg,#7C3AED,rgba(196,181,253,.15));
}
.funcs-head h2{
  margin:0;color:#fff;
  font-size:clamp(46px,6.4vw,86px);
  font-weight:800;letter-spacing:-.04em;line-height:.96;
}
.funcs-lede{
  margin:20px 0 0;max-width:56ch;
  font-size:clamp(16px,1.55vw,18.5px);line-height:1.6;
  color:rgba(255,255,255,.6);
}

/* ---------- estrutura ---------- */
.funcs-shell{
  display:grid;
  grid-template-columns:1fr;
  gap:20px;
  align-items:start;
}
@media(min-width:1000px){
  .funcs-shell{grid-template-columns:minmax(268px,320px) 1fr;gap:32px}
}

/* ---------- rail (as abas) ---------- */
.funcs-rail{display:flex;flex-direction:column;gap:8px}

/* uma linha só por aba: com 8 itens em duas linhas o rail passava
   de 600px e ficava mais alto que o painel ao lado */
.funcs-tab{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;gap:13px;
  width:100%;padding:10px 14px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:12px;
  background:rgba(255,255,255,.03);
  color:inherit;text-align:left;cursor:pointer;
  transition:background .22s ease,border-color .22s ease,transform .22s ease;
}
.funcs-tab:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14)}
.funcs-tab:focus-visible{outline:2px solid #A78BFA;outline-offset:3px}

.funcs-tab__num{
  display:grid;place-items:center;
  width:29px;height:29px;border-radius:50%;
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:11.5px;font-weight:600;
  background:rgba(255,255,255,.06);
  color:rgba(255,255,255,.42);
  border:1px solid rgba(255,255,255,.08);
  transition:background .22s ease,color .22s ease,border-color .22s ease,box-shadow .22s ease;
}
.funcs-tab__nome{
  min-width:0;
  font-size:15.5px;font-weight:600;letter-spacing:-.012em;
  color:rgba(255,255,255,.82);
  transition:color .22s ease;
}
.funcs-tab__seta{
  display:grid;place-items:center;
  color:rgba(255,255,255,.3);
  opacity:0;transform:translateX(-6px);
  transition:opacity .22s ease,transform .22s ease,color .22s ease;
}
.funcs-tab__seta svg{width:17px;height:17px}
.funcs-tab:hover .funcs-tab__seta{opacity:.65;transform:translateX(0)}

/* aba ativa */
.funcs-tab.is-on{
  background:linear-gradient(100deg,rgba(124,58,237,.24),rgba(124,58,237,.08));
  border-color:rgba(167,139,250,.42);
  transform:translateX(4px);
}
.funcs-tab.is-on .funcs-tab__num{
  background:linear-gradient(140deg,#8B5CF6,#6D28D9);
  border-color:transparent;color:#fff;
  box-shadow:0 6px 18px -6px rgba(124,58,237,.85);
}
.funcs-tab.is-on .funcs-tab__nome{color:#fff}
.funcs-tab.is-on .funcs-tab__seta{opacity:1;transform:translateX(0);color:#C4B5FD}

/* no mobile o rail vira uma faixa que rola na horizontal */
@media(max-width:999px){
  .funcs-rail{
    flex-direction:row;gap:8px;
    overflow-x:auto;padding-bottom:6px;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
  }
  .funcs-rail::-webkit-scrollbar{display:none}
  .funcs-tab{
    width:auto;flex:0 0 auto;
    grid-template-columns:auto auto;
    scroll-snap-align:start;
    padding:10px 15px;
  }
  .funcs-tab__nome{white-space:nowrap}
  .funcs-tab__seta{display:none}
  .funcs-tab.is-on{transform:none}
}

/* ---------- painel ---------- */
.funcs-panel{
  display:flex;flex-direction:column;gap:22px;
  padding:20px;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.09);
  background:rgba(255,255,255,.035);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  animation:fnEntra .42s cubic-bezier(.2,.7,.3,1) both;
}
.funcs-panel:focus{outline:none}

/* Texto e imagem lado a lado a partir de 1140px. Empilhado, a imagem
   empurrava o texto pra baixo da dobra e obrigava a escolher entre
   olhar a tela ou ler a explicação. */
@media(min-width:1140px){
  .funcs-panel{
    display:grid;
    grid-template-columns:minmax(0,0.82fr) minmax(0,1.18fr);
    align-items:center;
    gap:34px;
    padding:26px;
  }
}
@keyframes fnEntra{
  from{opacity:0;transform:translateY(10px)}
  to  {opacity:1;transform:none}
}

/* a "tela".
   width:fit-content faz a moldura abraçar o print. Antes era o
   contrário (moldura fixa em 4:3, print com object-fit:contain),
   e todo print de proporção diferente ficava com tarja preta. */
.funcs-screen{
  margin:0 auto;border-radius:14px;overflow:hidden;
  width:fit-content;max-width:100%;
  border:1px solid rgba(255,255,255,.1);
  background:#0A0614;
  box-shadow:0 40px 80px -40px rgba(0,0,0,.9);
}
/* width:0 + min-width:100% tira a barra do cálculo de largura da
   moldura. Sem isso o rótulo, quando mais largo que o print,
   esticava a moldura e reabria vazio ao lado da imagem. */
.funcs-screen__bar{
  display:flex;align-items:center;gap:7px;
  width:0;min-width:100%;
  padding:11px 14px;
  background:rgba(255,255,255,.05);
  border-bottom:1px solid rgba(255,255,255,.07);
}
.funcs-screen__dot{
  width:9px;height:9px;border-radius:50%;
  background:rgba(255,255,255,.16);
}
.funcs-screen__dot:first-child{background:rgba(255,107,107,.5)}
.funcs-screen__dot:nth-child(2){background:rgba(255,201,102,.5)}
.funcs-screen__dot:nth-child(3){background:rgba(126,217,157,.5)}
.funcs-screen__label{
  margin-left:10px;
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:11px;font-style:normal;letter-spacing:.06em;
  color:rgba(255,255,255,.38);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* aspecto largo em vez do quadrado antigo: os prints são ~2:1,
   então aqui eles aparecem bem maiores do que antes */
/* sem aspect-ratio fixo: quem manda na caixa é o próprio print.
   flex faz a caixa colar exatamente na altura da imagem. */
.funcs-screen__view{
  position:relative;
  display:flex;
  background:#0A0614;
  overflow:hidden;
}

/* o print define a caixa. max-height segura o print vertical do
   WhatsApp (0,50:1), que senão passaria de 1100px de altura. */
.funcs-screen__img{
  display:block;
  width:auto;height:auto;
  max-width:100%;
  max-height:500px;
  animation:fnZoom .5s cubic-bezier(.2,.7,.3,1) both;
}
@keyframes fnZoom{
  from{opacity:0;transform:scale(.985)}
  to  {opacity:1;transform:none}
}
.funcs-screen__mock{
  display:grid;place-items:center;
  width:min(560px,100%);aspect-ratio:16/10;
  padding:22px;overflow:hidden;
  background:
    radial-gradient(60% 60% at 50% 0%,rgba(124,58,237,.14),transparent 70%),
    #0A0614;
}
.funcs-screen__mock > *{max-width:100%;transform:scale(.92)}

/* texto do painel */
.funcs-info{padding:2px 6px 8px}
.funcs-info__kicker{
  margin:0 0 14px;
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:12.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:#C4B5FD;
}
.funcs-info__titulo{
  margin:0;color:#fff;
  font-size:clamp(26px,2.9vw,38px);
  font-weight:700;letter-spacing:-.028em;line-height:1.12;
  text-wrap:balance;
}
/* corpo em ~19px: é o texto que carrega o argumento da seção,
   não pode ter o mesmo peso de legenda de rodapé */
.funcs-info__texto{
  margin:16px 0 0;max-width:60ch;
  font-size:clamp(17px,1.65vw,19.5px);line-height:1.62;
  color:rgba(255,255,255,.72);
}
.funcs-info__destaque{
  display:inline-block;margin:22px 0 0;
  padding:13px 20px 13px 18px;
  border-left:2px solid #A78BFA;
  border-radius:0 10px 10px 0;
  background:linear-gradient(90deg,rgba(124,58,237,.2),rgba(124,58,237,.02));
  font-size:clamp(16px,1.5vw,17.5px);font-weight:600;letter-spacing:-.01em;
  color:#EDE9FE;
}

/* quem prefere menos movimento não recebe nenhum */
@media(prefers-reduced-motion:reduce){
  .funcs-panel,.funcs-screen__img{animation:none}
  .funcs-tab,.funcs-tab__seta,.funcs-tab__num{transition:none}
  .funcs-tab.is-on{transform:none}

  /* NÃO acrescente .video-frame__flip aqui.
     É o animationend dele que executa a troca do vídeo; matar a
     animação por CSS trava a troca e deixa o painel preso na tela.
     A redução de movimento do giro é tratada em JS, no VideoSection
     (matchMedia), que pula as fases e troca direto. */
}

/* =========================================================
   4) Seção de planos
   ========================================================= */
.section-plans{
  padding:130px 0 140px;
  background:var(--paper,#FBF8F4);
  border-top:1px solid var(--rule,#E5E1DA);
}
@media(max-width:700px){.section-plans{padding:76px 0 84px}}

.plans-head{max-width:760px;margin:0 auto 60px;text-align:center}
.plans-head h2{
  font-size:clamp(32px,4.4vw,52px);
  letter-spacing:-.025em;line-height:1.06;margin:0;
}
.plans-head .lede{
  color:var(--muted);font-size:clamp(16px,1.6vw,19px);
  margin-top:18px;line-height:1.55;
}

.plans-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:22px;
  align-items:stretch;
}
@media(min-width:900px){
  .plans-grid{grid-template-columns:repeat(3,1fr);gap:24px}
}

.plan-card{
  position:relative;
  display:flex;flex-direction:column;
  padding:34px 30px 32px;
  border-radius:18px;
  background:#fff;
  border:1px solid var(--rule,#E5E1DA);
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}
.plan-card:hover{
  transform:translateY(-3px);
  border-color:rgba(124,58,237,.28);
  box-shadow:0 24px 48px -28px rgba(46,16,101,.3);
}

.plan-card--featured{
  border:1.5px solid var(--primary,#7C3AED);
  box-shadow:0 28px 60px -30px rgba(124,58,237,.5);
}
@media(min-width:900px){
  .plan-card--featured{transform:scale(1.035);z-index:1}
  .plan-card--featured:hover{transform:scale(1.035) translateY(-3px)}
}

.plan-card__badge{
  position:absolute;top:-12px;left:50%;transform:translateX(-50%);
  font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:#fff;background:var(--primary,#7C3AED);
  padding:5px 14px;border-radius:999px;white-space:nowrap;
  box-shadow:0 6px 18px -6px rgba(124,58,237,.7);
}

.plan-card__head h3{
  margin:0;font-size:20px;font-weight:700;letter-spacing:-.015em;
}
.plan-card__resumo{
  margin:8px 0 0;font-size:14px;line-height:1.55;color:var(--muted);
}
@media(min-width:900px){
  /* alinha preço e lista entre os três cards, mesmo com resumos de alturas diferentes */
  .plan-card__resumo{min-height:66px}
}

.plan-card__price{
  display:flex;align-items:baseline;gap:4px;
  margin:24px 0 0;
}
.plan-card__currency{font-size:19px;font-weight:600;color:var(--muted);align-self:flex-start;margin-top:8px}
.plan-card__value{
  font-size:46px;font-weight:800;letter-spacing:-.035em;line-height:1;
  color:var(--ink,#0F0A1F);
}
.plan-card__period{font-size:15px;color:var(--muted-2,#9CA3AF);margin-left:2px}

/* Volume de conversas — o número que de fato separa os planos */
.plan-card__volume{
  display:flex;align-items:baseline;gap:7px;
  margin-top:18px;padding:13px 15px;
  border-radius:11px;
  background:rgba(124,58,237,.06);
  border:1px solid rgba(124,58,237,.13);
}
.plan-card__volume strong{
  font-size:22px;font-weight:700;letter-spacing:-.02em;
  color:var(--primary,#7C3AED);line-height:1;
}
.plan-card__volume span{font-size:13.5px;color:var(--muted)}

.plan-card__list{
  list-style:none;margin:24px 0 0;padding:0;
  display:flex;flex-direction:column;gap:14px;
  flex:1;
}
.plan-card__list li{
  display:flex;align-items:flex-start;gap:11px;
  font-size:14.5px;line-height:1.4;color:#374151;
}
.plan-card__feat{display:flex;flex-direction:column;gap:2px}
.plan-card__feat small{
  font-size:12.5px;line-height:1.4;color:var(--muted-2,#9CA3AF);
}
.plan-card__check{
  flex:0 0 18px;height:18px;margin-top:2px;
  display:grid;place-items:center;border-radius:50%;
  background:rgba(124,58,237,.1);color:var(--primary,#7C3AED);
}
.plan-card__check svg{width:11px;height:11px}

/* Recurso que não entra no plano (via `excecoes`) */
.plan-card__list li.is-out{color:var(--muted-2,#9CA3AF)}
.plan-card__list li.is-out .plan-card__check{
  background:rgba(107,114,128,.1);color:var(--muted-2,#9CA3AF);
}
.plan-card__list li.is-out .plan-card__feat small{color:#C6CAD1}

/* Limites do plano */
.plan-card__specs{
  margin:24px 0 0;padding:18px 0 0;
  border-top:1px solid var(--line,#EEEAF5);
  display:flex;flex-direction:column;gap:10px;
}
/* Empilhado, não lado a lado: "2 (WhatsApp + navegador)" não cabe
   na largura do card em duas colunas e quebra no meio. */
.plan-card__specs > div{display:flex;flex-direction:column;gap:3px}
.plan-card__specs dt{
  font-size:12px;font-weight:500;letter-spacing:.05em;text-transform:uppercase;
  color:var(--muted-2,#9CA3AF);
}
.plan-card__specs dd{
  margin:0;font-size:14.5px;font-weight:600;color:var(--ink,#0F0A1F);
  line-height:1.35;
}

.plan-card__cta{
  margin-top:26px;
  width:100%;justify-content:center;
  height:48px;
}