/* ============================================================
   planos · cards sem preço
   Layout: 4 cards de 285 com gap 20 em 1200.
   ============================================================ */
.lp-planos{padding-top:192px;padding-bottom:152px;}
.lp-planos-titulo{
  margin:0;padding:0 0 64px 40px;
  font-size:var(--fs-h2,clamp(25px,3vw,36px));font-weight:500;line-height:1.15;letter-spacing:-.01em;
  color:var(--ink,#121212);white-space:pre-line;
}
.lp-planos-trilho{display:flex;gap:20px;}
.lp-plano{width:calc((100% - 60px) / 4);display:flex;flex-direction:column;min-width:0;}
.lp-plano-topo{
  display:flex;flex-direction:column;gap:12px;padding:24px;flex:0 0 auto;
  border-bottom:1px solid var(--line,#e4e4df);
  background:linear-gradient(180deg,
    rgba(138,163,246,.2) 0%, rgba(247,192,198,.13) 40%,
    rgba(250,216,150,.27) 80%, rgba(255,255,255,0) 100%);
}
.lp-plano--destaque .lp-plano-topo{background:none;}
.lp-plano-nome{margin:0;font-size:var(--fs-h4,20px);font-weight:500;line-height:1.25;letter-spacing:-.01em;color:var(--ink,#121212);}
.lp-plano--destaque .lp-plano-nome span{
  background-image:linear-gradient(90deg,#5f74eb 0%,#e05a47 60%,#f7be54 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
}
/* linha sempre renderizada, com   quando vazia (bug 6.25) */
.lp-plano-publico{margin:0;font-size:var(--fs-xs,13px);line-height:1.35;color:var(--muted,#71767e);min-height:1.35em;}
/* botão do plano autossuficiente: antes dependia do blocos.css (só carregado em /solucao);
   em página sem 'blocos' o botão saía como link solto. Mesmos valores do .lp-btn-sq. */
.lp-plano-cta{
  display:inline-flex;align-items:center;justify-content:center;
  padding:0 24px;border-radius:0;font-weight:500;line-height:1;letter-spacing:-.01em;
  text-decoration:none;transition:background-color .2s ease,transform .18s ease;
}
.lp-plano-cta:hover{transform:translateY(-1px);}
.lp-plano-cta:active{transform:scale(.972);}
.lp-plano-cta.lp-btn-escuro,.lp-plano-cta.lp-btn-escuro:visited{background:var(--navy-900,#011630);color:#fff;}
.lp-plano-cta.lp-btn-escuro:hover{background:var(--navy-800,#04294f);color:#fff;}
@media (prefers-reduced-motion:reduce){.lp-plano-cta{transition:none;}}
.lp-plano-cta.lp-btn-sq{width:100%;min-width:0;min-height:44px;font-size:var(--fs-sm,15px);gap:8px;}
.lp-btn-mudo,.lp-btn-mudo:visited{background:var(--paper-3,#ececea);color:var(--ink,#121212);}
.lp-btn-mudo:hover{background:var(--line,#e4e4df);color:var(--ink,#121212);}

.lp-plano-recursos{list-style:none;margin:0;display:flex;flex-direction:column;gap:16px;padding:24px;flex:1 1 auto;}
.lp-plano-recurso{display:flex;align-items:flex-start;gap:12px;min-width:0;font-size:var(--fs-sm,15px);}
.lp-plano-recurso i{
  width:20px;height:1.45em;min-width:20px;flex:0 0 auto;
  display:grid;place-items:center;color:var(--ink,#121212);font-style:normal;
}
.lp-plano-recurso span{font-weight:500;line-height:1.45;min-width:0;color:var(--ink,#121212);}
.lp-plano-nota{flex:1 1 auto;display:flex;align-items:flex-end;padding-top:4px;font-size:var(--fs-xs,13px);line-height:1.4;color:var(--muted,#71767e);}

/* 3 planos (/franquias): 3 colunas do tablet para cima; no celular vale o carrossel abaixo */
@media (min-width:769px){
  .lp-planos--3 .lp-planos-trilho{flex-wrap:nowrap;}
  .lp-planos--3 .lp-plano{width:calc((100% - 40px) / 3);}
}
@media (max-width:1200px){
  .lp-planos-trilho{flex-wrap:wrap;}
  .lp-plano{width:calc((100% - 20px) / 2);}
}
@media (max-width:1024px){
  .lp-planos{padding-top:88px;padding-bottom:56px;}
}
@media (max-width:768px){
  .lp-planos{padding-top:56px;padding-bottom:32px;}
  .lp-planos-titulo{padding:0 0 32px;}
  /* carrossel com espiada do próximo card */
  .lp-planos-trilho{
    flex-wrap:nowrap;gap:12px;overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;
    touch-action:pan-x pan-y;overscroll-behavior-x:contain;
  }
  .lp-planos-trilho::-webkit-scrollbar{display:none;}
  .lp-plano{width:calc(100% - 40px);flex:0 0 auto;scroll-snap-align:start;}
}
@media (max-width:420px){
  .lp-plano{width:calc(100% - 20px);}
}

/* O reset do base.css (.lp-root h2, ul, li {margin:0;padding:0}) tem especificidade maior
   que as classes acima e zerava o respiro do título e dos recursos (achado em 23/09/2026,
   também afetava /solucao). Mesmos valores, com .lp-root na frente. */
.lp-root .lp-planos-titulo{padding:0 0 64px 40px;}
.lp-root .lp-plano-recursos{padding:24px;}
.lp-root .lp-plano-nota{padding-top:4px;}
@media (max-width:768px){
  .lp-root .lp-planos-titulo{padding:0 0 32px;}
}

/* ============================================================
   estilo "apple" (Solução V2, 24/09/2026) — os mesmos cards da Solução
   (topo em degradê, destaque com nome em degradê), com o acabamento do kit:
   título .lp-sec-tit (acende), cantos de 24, fundo claro no card, botão em
   pílula, entrada em cascata, card sobe 4px no hover. Respiro vem do gap da raiz.
   ============================================================ */
.lp-root .lp-planos.lp-planos--apple{padding-top:0;padding-bottom:0;}
.lp-root .lp-planos--apple .lp-planos-head{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-16);margin-bottom:var(--space-48);}
.lp-root .lp-planos--apple .lp-planos-head .lp-eyebrow{margin-bottom:0;}
.lp-root .lp-planos--apple .lp-planos-sub{max-width:56ch;font-size:18px;line-height:1.5;color:var(--muted,#71767e);}
.lp-root .lp-planos--apple .lp-plano{
  background:var(--paper-2,#f8f8f8);border-radius:var(--radius-lg);overflow:hidden;
  transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1);
}
.lp-root .lp-planos--apple .lp-plano:nth-child(2){transition-delay:.12s;}
.lp-root .lp-planos--apple .lp-plano:nth-child(3){transition-delay:.24s;}
.lp-root .lp-planos--apple .lp-plano:nth-child(4){transition-delay:.36s;}
@media (hover:hover){
  .lp-root .lp-planos--apple .lp-plano.on:hover{transform:translateY(-4px);transition-delay:0s;transition-duration:.25s;}
}
.lp-root .lp-planos--apple .lp-plano-topo{padding:var(--space-32) var(--space-24) var(--space-24);}
.lp-root .lp-planos--apple .lp-plano--destaque .lp-plano-topo{
  background:linear-gradient(180deg,rgba(138,163,246,.12) 0%,rgba(255,255,255,0) 100%);
}
.lp-root .lp-planos--apple .lp-plano-nome{font-weight:600;letter-spacing:-.02em;}
.lp-root .lp-planos--apple .lp-plano--destaque .lp-plano-nome span{display:inline-block;}
.lp-root .lp-planos--apple .lp-plano-cta.lp-btn-sq{margin-top:var(--space-8);border-radius:999px;min-height:44px;}
.lp-root .lp-planos--apple .lp-plano-recursos{padding:var(--space-24) var(--space-24) var(--space-32);}
@media (max-width:768px){
  .lp-root .lp-planos--apple .lp-planos-head{margin-bottom:var(--space-24);}
  .lp-root .lp-planos--apple .lp-plano{transition-delay:0s!important;}
}
@media (prefers-reduced-motion:reduce){ .lp-root .lp-planos--apple .lp-plano{transition:none;} }

/* ============================================================
   planos com preço (Solução, 08/10/2026) — só com .lp-planos--preco (JSON com "periodos").
   Chave Mensal/Anual/Trienal em pílula, preço grande, seletor de telas e botão no pé do card.
   ============================================================ */
.lp-root .lp-planos-chave{display:inline-flex;gap:4px;padding:4px;margin:0 0 var(--space-32);border-radius:999px;background:var(--paper-3,#ececea);}
.lp-root .lp-planos-chave button{
  min-height:40px;padding:0 20px;border:0;border-radius:999px;background:transparent;cursor:pointer;
  font:inherit;font-size:var(--fs-sm,15px);font-weight:500;color:var(--ink-2,#3d434b);
  transition:background-color .2s ease,color .2s ease,box-shadow .2s ease;
}
.lp-root .lp-planos-chave button[aria-checked="true"]{background:#fff;color:var(--ink,#121212);box-shadow:0 1px 4px rgba(1,22,48,.12);}
.lp-root .lp-planos-chave button:focus-visible{outline:2px solid var(--blue,#015aff);outline-offset:2px;}
.lp-root .lp-planos--preco .lp-plano{display:flex;flex-direction:column;}
.lp-root .lp-plano-preco{display:flex;align-items:baseline;gap:4px;margin:var(--space-8) 0 0;color:var(--ink,#121212);}
.lp-root .lp-plano-preco b{font-size:clamp(26px,2.4vw,32px);font-weight:700;letter-spacing:-.02em;line-height:1.1;font-variant-numeric:tabular-nums;}
.lp-root .lp-plano-preco span{font-size:var(--fs-sm,15px);color:var(--muted,#71767e);}
.lp-root .lp-plano-cond{margin:0;min-height:1.4em;font-size:var(--fs-xs,13px);line-height:1.4;color:var(--blue,#015aff);}
.lp-root .lp-planos--preco .lp-plano-recursos{flex:1 1 auto;}
.lp-root .lp-planos--preco .lp-plano-recurso i{color:var(--blue,#015aff);}
.lp-root .lp-plano-pe{display:flex;flex-direction:column;gap:var(--space-12);padding:0 var(--space-24) var(--space-24);}
.lp-root .lp-plano-extra{display:flex;align-items:center;justify-content:space-between;gap:var(--space-12);padding:var(--space-12) 0;border-top:1px solid var(--line,#e4e4df);}
.lp-root .lp-plano-extra-txt{display:flex;flex-direction:column;font-size:var(--fs-sm,15px);font-weight:500;color:var(--ink,#121212);min-width:0;}
.lp-root .lp-plano-extra-txt small{font-size:var(--fs-xs,13px);font-weight:400;color:var(--muted,#71767e);}
.lp-root .lp-step{display:inline-flex;align-items:center;gap:4px;flex:0 0 auto;padding:3px;border-radius:999px;background:#fff;border:1px solid var(--line,#e4e4df);}
.lp-root .lp-step button{width:32px;height:32px;border:0;border-radius:50%;background:var(--paper-2,#f5f5f5);color:var(--ink,#121212);font:inherit;font-size:18px;line-height:1;cursor:pointer;}
.lp-root .lp-step button:hover:not(:disabled){background:var(--paper-3,#ececea);}
.lp-root .lp-step button:disabled{opacity:.35;cursor:default;}
.lp-root .lp-step button:focus-visible{outline:2px solid var(--blue,#015aff);outline-offset:1px;}
.lp-root .lp-step output{min-width:24px;text-align:center;font-weight:600;font-variant-numeric:tabular-nums;}
.lp-root .lp-plano-total{display:flex;align-items:baseline;gap:6px;margin:0;font-size:var(--fs-sm,15px);color:var(--muted,#71767e);}
.lp-root .lp-plano-total[hidden]{display:none;}
.lp-root .lp-plano-total b{font-size:var(--fs-h4,20px);color:var(--ink,#121212);font-variant-numeric:tabular-nums;}
.lp-root .lp-planos--preco .lp-plano-pe .lp-plano-cta.lp-btn-sq{margin-top:var(--space-4);}
@media (max-width:768px){
  .lp-root .lp-planos-chave{display:flex;width:100%;margin-bottom:var(--space-24);}
  .lp-root .lp-planos-chave button{flex:1 1 0;padding:0 8px;}
}
@media (prefers-reduced-motion:reduce){ .lp-root .lp-planos-chave button{transition:none;} }