/* Páginas: planos Microsoft 365, parceiro em Florianópolis e cases. Complementa migracao.css e comprar.css. */

/* ---------- Ilustração dos planos (três cartões empilhados) */
.pl-arte { position: relative; min-width: 0; padding: var(--s-7) var(--s-6); border-radius: 28px; background: rgba(255,255,255,.55); border: 1px solid rgba(255,255,255,.9);
  box-shadow: 0 40px 80px -40px rgba(60,30,160,.45), inset 0 1px 0 #fff; backdrop-filter: blur(6px); isolation: isolate; display: grid; gap: 14px; }
.pl-cartao { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 16px; background: #fff;
  border: 1px solid #ebe8f2; box-shadow: 0 10px 24px -18px rgba(0,0,0,.4); animation: pl-sobe 7s ease-in-out infinite; animation-delay: calc(var(--i) * .5s); }
.pl-cartao:nth-child(2) { margin-left: 22px; }
.pl-cartao:nth-child(3) { margin-left: 44px; }
.pl-cartao--rec { border: 2px solid var(--roxo); box-shadow: 0 22px 40px -22px rgba(87,55,207,.65); }
.pl-cartao__n { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: #f3f0fe; color: var(--roxo-700); font: 600 15px/1 var(--f-titulo); }
.pl-cartao--rec .pl-cartao__n { background: var(--roxo); color: #fff; }
.pl-cartao b { display: block; font: 600 15px/1.2 var(--f-titulo); color: var(--tinta); }
.pl-cartao small { display: block; font-size: 12px; color: var(--tinta-2); margin-top: 2px; }
.pl-cartao__icos { display: flex; gap: 2px; flex: none; }
.pl-cartao__selo { position: absolute; top: -10px; right: 14px; padding: 3px 10px; border-radius: 999px; background: var(--roxo); color: #fff; font: 600 11px/1.4 var(--f-titulo); }
@keyframes pl-sobe { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .pl-cartao, .lc-pino i { animation: none; } }

/* ---------- Resposta direta: três planos */
.pl-planos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); }
.pl-plano { position: relative; display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-6); border-radius: 22px; background: #fff; border: 1px solid #ebe8f2; }
.pl-plano--rec { border: 2px solid var(--roxo); box-shadow: var(--sombra-2); }
.pl-plano__icos { display: flex; gap: 4px; }
.pl-plano h3 { font-size: var(--t-xl); margin: 0; }
.pl-plano__sub { margin: 0; color: var(--tinta-2); font-size: var(--t-sm); }
.pl-plano .checks { margin: var(--s-2) 0 0; gap: 10px; }
.pl-plano .checks li { font-size: var(--t-sm); }
.pl-plano__mais { margin-top: auto; padding-top: var(--s-3); font-size: var(--t-sm); color: var(--roxo-700); font-weight: 500; }

/* ---------- Tabela comparativa */
.pl-tabela-caixa { border: 1px solid #ebe8f2; border-radius: 20px; background: #fff; overflow: hidden; }
.pl-tabela-caixa .cm-tabela-rolagem { padding: 0; }
.pl-tabela-caixa .cm-tabela { min-width: 680px; }
.pl-tabela-caixa th[scope="row"] { min-width: 230px; }
.pl-rec { background: #f7f5ff; }
.pl-tabela-caixa thead th.pl-rec { background: #ece6ff; color: var(--roxo-700); }
.pl-tabela-caixa tbody th[scope="row"] .pl-r { display: flex; align-items: center; gap: 10px; }
.pl-tabela-caixa tbody th[scope="row"] .pl-r span { display: flex; flex: none; gap: 2px; min-width: 24px; }
.pl-grupo th { text-align: left; background: #faf9fe; font: 600 12px/1.3 var(--f-titulo); color: var(--roxo-700); letter-spacing: .02em; padding-top: 14px; }
.pl-nota { margin: var(--s-4) 0 0; color: var(--tinta-2); font-size: var(--t-sm); }
.pl-nota a { color: var(--roxo-700); font-weight: 500; }

/* ---------- Perfis */
.pl-perfis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
.pl-perfil { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-5); align-items: start; padding: var(--s-6); border-radius: 20px; background: #fff; border: 1px solid #ebe8f2; }
.pl-perfil__plano { display: grid; gap: 8px; justify-items: center; min-width: 96px; padding: 12px 10px; border-radius: 14px; background: #f3f0fe; text-align: center; }
.pl-perfil__plano span { display: flex; gap: 2px; }
.pl-perfil__plano b { font: 600 13px/1.25 var(--f-titulo); color: var(--roxo-700); }
.pl-perfil h3 { font-size: var(--t-lg); margin: 0 0 4px; }
.pl-perfil p { margin: 0; color: var(--tinta-2); font-size: var(--t-sm); line-height: 1.6; }

/* ---------- Links de produto */
.pl-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: var(--s-6); }
.pl-links a { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; background: #fff; border: 1px solid #ebe8f2; font: 500 var(--t-sm)/1 var(--f-titulo); color: var(--tinta); text-decoration: none; }
.pl-links a:hover { border-color: var(--roxo-300); color: var(--roxo-700); }

/* ---------- Blocos de duas colunas */
.pl-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); }
.pl-caixa { padding: var(--s-6); border-radius: 20px; background: #fff; border: 1px solid #ebe8f2; }
.pl-caixa h3 { font-size: var(--t-lg); margin: var(--s-3) 0 var(--s-2); }
.pl-caixa p { margin: 0 0 var(--s-3); color: var(--tinta-2); font-size: var(--t-sm); line-height: 1.6; }
.pl-caixa .checks { margin: var(--s-3) 0 0; gap: 10px; }
.pl-caixa .checks li { font-size: var(--t-sm); }
.pl-caixa__icos { display: flex; gap: 4px; }

/* ---------- Local: mapa de SC */
.lc-arte { position: relative; min-width: 0; padding: var(--s-6); border-radius: 28px; background: rgba(255,255,255,.6); border: 1px solid rgba(255,255,255,.9);
  box-shadow: 0 40px 80px -40px rgba(60,30,160,.45), inset 0 1px 0 #fff; isolation: isolate; }
.lc-arte svg { display: block; width: 100%; height: auto; overflow: visible; }
.lc-estado { fill: #efeaff; stroke: #b9a9fb; stroke-width: 2; stroke-linejoin: round; }
.lc-grade { stroke: #d9d0fc; stroke-width: 1; stroke-dasharray: 3 5; fill: none; }
.lc-cidade { fill: #fff; stroke: var(--roxo); stroke-width: 2; }
.lc-rotulo { font: 500 7px var(--f-titulo); fill: #55525f; }
.lc-rota { fill: none; stroke: #b9a9fb; stroke-width: 1.5; stroke-dasharray: 4 5; animation: mg-trilha 1.4s linear infinite; }
.lc-sede { fill: var(--roxo); }
.lc-sede-rotulo { font: 600 8.5px var(--f-titulo); fill: var(--roxo-700); }
.lc-pino i { transform-origin: center; }
.lc-ondas { fill: var(--roxo); opacity: .25; transform-box: fill-box; transform-origin: center; animation: lc-onda 2.6s ease-out infinite; }
@keyframes lc-onda { 0% { transform: scale(.4); opacity: .45; } 100% { transform: scale(2.2); opacity: 0; } }
.lc-apps { position: absolute; display: flex; gap: 2px; padding: 8px 10px; border-radius: 14px; background: #fff; border: 1px solid #ebe8f2; box-shadow: 0 12px 24px -16px rgba(0,0,0,.4); animation: pl-sobe 7s ease-in-out infinite; }
.lc-apps--1 { left: 6%; top: 6%; }
.lc-apps--2 { right: 6%; top: 6%; animation-delay: 1.4s; }
.lc-legenda { display: flex; flex-wrap: wrap; gap: 14px; margin-top: var(--s-4); font-size: 12px; color: var(--tinta-2); }
.lc-legenda span { display: inline-flex; align-items: center; gap: 6px; }
.lc-legenda i { width: 10px; height: 10px; border-radius: 50%; background: var(--roxo); }
.lc-legenda i.o { background: #fff; border: 2px solid var(--roxo); }
.lc-contato { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: var(--s-6); align-items: stretch; }
.lc-endereco { padding: var(--s-7); border-radius: 24px; background: #f7f5ff; border: 1px solid #ebe6fd; font-style: normal; display: grid; gap: var(--s-4); align-content: start; }
.lc-endereco h3 { margin: 0; font-size: var(--t-xl); }
.lc-endereco p { margin: 0; color: var(--tinta-2); }
.lc-endereco ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.lc-endereco li { display: flex; align-items: center; gap: 12px; }
.lc-endereco li svg { width: 20px; height: 20px; flex: none; color: var(--roxo-700); }
.lc-endereco a { color: var(--roxo-700); font-weight: 500; }
.lc-remoto { padding: var(--s-7); border-radius: 24px; background: #fff; border: 1px solid #ebe8f2; }
.lc-remoto h3 { margin: 0 0 var(--s-3); font-size: var(--t-xl); }

/* ---------- Cases */
.cs-hero .mg-hero__texto h1 { max-width: 22ch; }
.cs-logo { display: inline-flex; align-items: center; height: 76px; padding: 12px 22px; border-radius: 18px; background: #fff; border: 1px solid #ebe8f2; box-shadow: 0 16px 30px -22px rgba(60,30,160,.5); }
.cs-logo img { height: 48px; width: auto; max-width: 220px; object-fit: contain; display: block; }
.cs-ficha { display: grid; gap: 0; padding: var(--s-6); border-radius: 24px; background: #fff; border: 1px solid #ebe8f2; box-shadow: 0 30px 60px -40px rgba(60,30,160,.5); }
.cs-ficha div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: var(--s-4); padding: 14px 0; border-top: 1px solid #f0eef5; font-size: var(--t-sm); }
.cs-ficha div:first-child { border-top: 0; padding-top: 0; }
.cs-ficha dt { color: var(--tinta-2); }
.cs-ficha dd { margin: 0; color: var(--tinta); font-weight: 500; }
.cs-nums { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--s-4); }
.cs-nums div { padding: var(--s-5) var(--s-6); border-radius: 18px; background: #fff; border: 1px solid #ebe8f2; }
.cs-nums strong { display: block; font: 600 clamp(1.7rem, 1.3rem + 1.2vw, 2.4rem)/1.1 var(--f-titulo); color: var(--roxo-700); }
.cs-nums span { display: block; margin-top: 6px; font-size: var(--t-sm); color: var(--tinta-2); }
.cs-duo { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: var(--s-8); align-items: start; }
.cs-duo h2 { font-size: var(--t-2xl); margin: 0 0 var(--s-3); }
.cs-duo p { color: var(--tinta-2); }
.cs-citacao { margin: 0; padding: var(--s-7); border-radius: 24px; background: #f7f5ff; border: 1px solid #ebe6fd; }
.cs-citacao p { margin: 0 0 var(--s-4); font: 500 clamp(1.1rem, 1rem + .6vw, 1.4rem)/1.5 var(--f-titulo); color: var(--tinta); }
.cs-citacao cite { font-style: normal; font-size: var(--t-sm); color: var(--tinta-2); }
.cs-passos { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.cs-passos li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 14px; align-items: start; padding: 16px 18px; border-radius: 16px; background: #fff; border: 1px solid #ebe8f2; }
.cs-passos li > span { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: #f3f0fe; color: var(--roxo-700); font: 600 14px/1 var(--f-titulo); }
.cs-passos b { display: block; font-family: var(--f-titulo); font-weight: 600; color: var(--tinta); }
.cs-passos small { display: block; margin-top: 2px; font-size: var(--t-sm); color: var(--tinta-2); line-height: 1.55; }
.cs-links { display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-6); margin-top: var(--s-6); }

@media (max-width: 1080px) {
  .pl-planos { grid-template-columns: minmax(0, 1fr); }
  .pl-duo, .pl-perfis, .lc-contato, .cs-duo { grid-template-columns: minmax(0, 1fr); }
  .cs-duo { gap: var(--s-6); }
}
@media (max-width: 640px) {
  .pl-arte { padding: var(--s-5); }
  .pl-cartao { grid-template-columns: auto minmax(0, 1fr); }
  .pl-cartao__icos { grid-column: 1 / -1; }
  .pl-cartao:nth-child(2), .pl-cartao:nth-child(3) { margin-left: 0; }
  .pl-perfil { grid-template-columns: minmax(0, 1fr); }
  .pl-perfil__plano { justify-self: start; grid-auto-flow: column; padding: 8px 12px; }
  .lc-arte { padding: var(--s-4); }
  .lc-endereco, .lc-remoto { padding: var(--s-5); }
  .cs-ficha div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .cs-citacao { padding: var(--s-5); }
}
.pl-plano > .tag { position: absolute; top: var(--s-6); right: var(--s-6); }
@media (min-width: 641px) { .pl-perfil__plano { width: 150px; } }