/* Selene Studio · Preços. Page styles on top of the site kit (/site/site.css): the top with the three plans,
   the comparison table and the billing questions. Desktop from 960 px (the kit zooms the sections between
   960 and 1295 px); below that, the phone design. Colors come from the kit tokens, light and dark. */

/* the current page in the bar, the phone menu and the footer (a candidate for the kit) */
.nav-links a[aria-current="page"]{color:var(--signal);font-weight:500}
.menu-links a[aria-current="page"],.rd-col a[aria-current="page"]{color:var(--signal)}

/* 01 · top and plans */
.pr-topo{position:relative;overflow:hidden;padding:136px 0 80px;background:radial-gradient(64% 520px at 50% 100%,rgb(37 88 232 / .15) 0%,rgb(37 88 232 / 0) 72%),radial-gradient(50% 360px at 50% 140px,#fff 0%,rgb(255 255 255 / 0) 100%),var(--canvas)}
html.dark .pr-topo{background:radial-gradient(64% 520px at 50% 100%,rgb(38 105 254 / .2) 0%,rgb(38 105 254 / 0) 72%),radial-gradient(50% 360px at 50% 140px,rgb(255 255 255 / .06) 0%,rgb(255 255 255 / 0) 100%),var(--canvas)}
.pr-topo::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(var(--dots) 1px,transparent 1.4px) 0 0/18px 18px;-webkit-mask-image:radial-gradient(62% 54% at 50% 32%,transparent 42%,#000 100%);mask-image:radial-gradient(62% 54% at 50% 32%,transparent 42%,#000 100%)}
.pr-topo .wrap{position:relative}
.pr-cab{text-align:center}
.pr-cab h1{font:500 56px/1.05 var(--display);letter-spacing:-.02em;text-wrap:balance}
.pr-sub{margin:20px auto 0;max-width:600px;font-size:18px;line-height:1.5;color:var(--muted-fg);text-wrap:balance}
.pr-teste{display:inline-flex;align-items:center;gap:10px;margin-top:24px;font-size:15px;line-height:1.45;text-align:left}
.pr-ok{display:grid;place-items:center;flex:none;width:22px;height:22px;border-radius:99px;background:var(--success-soft);color:var(--success)}
.pr-ok svg{width:12px;height:12px}

.planos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:48px}
.plano{display:flex;flex-direction:column;padding:28px;border-radius:20px;background:var(--card);box-shadow:var(--floating)}
.p-topo{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:32px}
.plano .p-nome{font:600 22px/1.2 var(--sans);letter-spacing:-.01em}
/* the app's profile switcher: one avatar per profile, in the profile's own color */
.seletor{display:flex;align-items:center;gap:4px;padding:4px;border-radius:999px;background:var(--muted)}
.seletor i{display:grid;place-items:center;width:24px;height:24px;border-radius:99px;color:#fff;font:600 10px/1 var(--sans);font-style:normal}
.seletor .mais{display:inline-block;min-width:30px;padding:0 4px 0 2px;font:600 12px/24px var(--sans);color:var(--muted-fg)}
.p-quem{margin-top:10px;min-height:45px;font-size:15px;line-height:1.5;color:var(--muted-fg)}
.p-preco{margin-top:24px;font:600 28px/1.15 var(--sans);letter-spacing:-.02em}
.p-nota{margin-top:6px;min-height:38px;font-size:13px;line-height:1.45;color:var(--muted-fg)}
.p-nota span{display:block}
.plano .btn{width:100%;margin-top:20px}
.lims{margin-top:24px;border-top:1px solid var(--border)}
.lim{display:flex;align-items:center;justify-content:space-between;height:48px;border-bottom:1px solid var(--border);font-size:15px}
.lim dt{color:var(--muted-fg)}
.lim dd{font:600 17px/1 var(--sans)}
.p-tudo{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;margin-top:16px;font-size:14px;color:var(--muted-fg);text-decoration:none;transition:color .2s var(--ease)}
.p-tudo:hover{color:var(--signal)}
.p-tudo svg{width:14px;height:14px;color:var(--signal)}
.pr-nota{margin-top:28px;text-align:center;font-size:14px;color:var(--muted-fg)}
/* before the motion is built, the pieces that move wait hidden (the kit drops .anim if GSAP never runs) */
.anim .seletor i,.anim .seletor .mais,.anim .lim dd[data-conta]{opacity:0}

/* 02 · comparison */
.cmp-cel{display:none}
.cmp-pc{margin-top:48px;padding:0 32px 8px;border-radius:20px;background:var(--card);box-shadow:var(--raised);overflow:clip}
.tabela{width:100%;border-collapse:separate;border-spacing:0}
.tabela col.c{width:200px}
.tabela thead th,.tabela thead td{position:sticky;top:calc(72px / var(--z,1));z-index:2;height:88px;background:var(--card);box-shadow:inset 0 -1px 0 var(--border)}
.tabela thead td{box-shadow:inset 0 -1px 0 var(--border),-32px 0 0 var(--card)}
.tabela thead th:last-child{box-shadow:inset 0 -1px 0 var(--border),32px 0 0 var(--card)}
.tabela thead th{text-align:center;vertical-align:middle;font-weight:400}
.tabela thead b{display:block;font:600 18px/1.2 var(--sans)}
.tabela thead small{display:block;margin-top:5px;font-size:13px;line-height:1.3;color:var(--muted-fg)}
.tabela tbody tr{height:62px}
.tabela tbody tr>*{border-bottom:1px solid var(--border)}
.tabela tbody:last-child tr:last-child>*{border-bottom:0}
.tabela tbody th{padding:11px 32px 11px 0;text-align:left;vertical-align:middle;font-weight:400}
.tabela tbody th b{display:flex;align-items:center;gap:10px;font:600 16px/1.35 var(--sans)}
.tabela tbody th>span{display:block;margin-top:2px;font-size:14px;line-height:1.45;color:var(--muted-fg)}
.tabela td{text-align:center;vertical-align:middle;font:600 17px/1 var(--sans)}
.tabela .grupo{height:auto}
.tabela .grupo th{padding:24px 0 8px;font:600 13px/1.3 var(--sans);color:var(--faint)}
.ck{width:18px;height:18px;margin:0 auto;color:var(--signal)}
/* the comment pin of the Studio (st-comment-pins), here as a marker of the row that defines the product */
.alfinete{display:inline-grid;place-items:center;flex:none;width:24px;height:24px;border-radius:12px 12px 12px 2px;background:var(--signal);color:#fff;font:600 12px/1 var(--sans);box-shadow:0 0 0 2px #fff,0 2px 6px -1px rgb(0 0 0 / .35)}

/* 03 · billing questions: all open, the answers are short */
.cb .lead{margin-top:16px;font-size:17px}
.cb .lead a,.cb-item a{color:var(--signal);font-weight:500;text-decoration:none}
.cb .lead a:hover,.cb-item a:hover{text-decoration:underline;text-underline-offset:3px}
.cb-grade{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px 32px;margin-top:56px}
.cb-item h3{margin-top:16px;font:600 17px/1.4 var(--sans)}
.cb-item p{margin-top:8px;font-size:16px;line-height:1.55;color:var(--muted-fg);text-wrap:pretty}

/* phones and narrow windows */
@media (max-width:959px){
  .pr-topo{padding:88px 0 56px;background:var(--hx-bg-cel)}
  html.dark .pr-topo{background:var(--hx-bg-cel)}
  .pr-topo::before{display:none}
  .pr-cab h1{font-size:36px}
  .pr-sub{margin-top:16px;font-size:16px;text-wrap:pretty}
  .pr-teste{display:flex;align-items:flex-start;max-width:330px;margin:20px auto 0}
  .planos{grid-template-columns:minmax(0,1fr);gap:16px;margin-top:32px}
  .plano{padding:20px}
  .plano .p-nome{font-size:20px}
  .p-quem{margin-top:8px;min-height:0}
  .p-preco{margin-top:20px;font-size:26px}
  .p-nota{min-height:0}
  .plano .btn{margin-top:18px}
  .lims{margin-top:20px}
  .lim{height:46px}
  .lim dd{font-size:16px}
  .p-tudo{margin-top:14px}
  .pr-nota{margin-top:24px}

  .cmp-pc{display:none}
  .cmp-cel{display:block;margin-top:28px}
  .tab-cel-card{padding:0 16px 4px;border-radius:20px;background:var(--card);box-shadow:var(--raised)}
  .tab-cel{width:100%;border-collapse:separate;border-spacing:0;font-variant-numeric:tabular-nums}
  .tab-cel col.v{width:64px}
  .tab-cel col.v-largo{width:72px}
  .tab-cel th,.tab-cel td{border-bottom:1px solid var(--border)}
  .tab-cel tbody tr:last-child>*{border-bottom:0}
  .tab-cel thead th,.tab-cel thead td{height:48px}
  .tab-cel thead th{text-align:center;font:600 13px/1.2 var(--sans)}
  .tab-cel tbody th{height:52px;padding-right:8px;text-align:left;font:400 14px/1.35 var(--sans);color:var(--muted-fg)}
  .tab-cel td{text-align:center;font:600 16px/1.15 var(--sans)}
  .tab-cel td.txt{font-size:13px}
  .cmp-cel h3{margin-top:40px;font:600 18px/1.3 var(--sans)}
  .rec-g{margin-top:20px;padding-bottom:8px;border-bottom:1px solid var(--border);font:600 13px/1.3 var(--sans);color:var(--faint)}
  .rec{list-style:none;padding:0}
  .rec li{display:grid;grid-template-columns:20px minmax(0,1fr);gap:10px;padding:12px 0;border-bottom:1px solid var(--border)}
  .rec .ck{width:16px;height:16px;margin:3px 0 0}
  .rec b{display:flex;align-items:center;gap:8px;font:600 15px/1.4 var(--sans)}
  .rec li>div>span{display:block;margin-top:2px;font-size:14px;line-height:1.45;color:var(--muted-fg)}

  .cb .lead{margin-top:12px;font-size:16px}
  .cb-grade{grid-template-columns:minmax(0,1fr);gap:28px;margin-top:32px}
  .cb-item{display:grid;grid-template-columns:36px minmax(0,1fr);gap:14px;align-items:start}
  .cb-item h3{margin-top:0;padding-top:7px;font-size:16px}
  .cb-item p{margin-top:6px;font-size:15px}
}