/*!
 * servicosuporte.responsive.css — Inova Tecnologia (p/ servicosuporte.html)
 * Limpeza e alinhamento com o padrão do site:
 * - Mantidos: .suporte-section (paddings), Canais & SLA, Pricing (cards de planos)
 * - Adicionados: responsividade da seção .servicos (igual ao index)
 * - Removidos: blocos não usados (.suporte-card/*, .planos-grid/.plano-card, processo)
 * - Unificado: animação .will-animate (1 única keyframe)
 */

/* =========================================================
   SEÇÕES BASE (usadas por #suporte-canais e #suporte-planos)
   ========================================================= */
.suporte-section{ padding: 40px 100px; }
.suporte-header{ max-width: 960px; margin: 0 auto 12px; text-align:center; }
.suporte-subtitle{ margin: 6px auto 0; max-width: 72ch; }

/* =========================================================
   *** NOVO ***  SEÇÃO "SERVIÇOS" (mesma estrutura do index)
   - garante grid 3/2/1 colunas + botões 100% no mobile
   - evita carrossel/colunas automáticas acidentais
   ========================================================= */
.servicos{ padding: 40px 100px; } /* mesmo padrão de seção do index */
.servicos-header{ text-align:center; max-width:960px; margin:0 auto 12px; }

.servicos-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 24px;
  grid-auto-flow: row;        /* impede fluxo em colunas/carrocel */
  grid-auto-columns: initial; /* evita valores herdados */
  overflow: visible;          /* evita "corte" lateral */
}
.servico-card{
  width:auto; min-width:0;    /* corrige cartões estreitos no mobile */
}
.servico-cta, .servico-cta-servicos{ justify-content:center; }

/* Breakpoints idênticos ao index */
@media (min-width:1920px){
  .servicos{ padding: 60px 300px; }
}
@media (max-width:1200px){
  .servicos-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width:768px){
  .servicos{ padding: 32px 20px; }
  .servicos-grid{ grid-template-columns: 1fr; gap:16px; }
  .servico-cta, .servico-cta-servicos{ inline-size:100%; }
}
@media (max-width:500px){
  .servicos{ padding: 26px 16px; }
}
@media (max-width:360px){
  .servicos{ padding: 20px 12px; }
}

/* ======================================
   CANAIS & SLA (mantido do seu arquivo)
   ====================================== */
.canais-grid{ display:grid; grid-template-columns: 1.1fr .9fr; gap: 24px; align-items: start; }
.sla-card{ background:#fff; border-radius:14px; box-shadow:0 8px 22px rgba(0,0,0,.06); padding:18px; }
.sla-title{ margin: 0 0 8px; }
.sla-lista{ list-style:none; padding:0; margin: 0 0 8px; display:grid; gap:8px; }
.sla-lista li{ display:flex; justify-content:space-between; align-items:center; padding:10px 12px; border:1px solid rgba(0,0,0,.06); border-radius:10px; }
.sla-lista li span{ opacity:.85; }
.sla-lista li strong{ font-weight:600; }
.sla-obs{ margin:8px 0 0; font-size:.94rem; opacity:.9; }

@media (max-width:1024px){
  .canais-grid{ grid-template-columns: 1fr; }
}

/* =========================================================
   PRICING (cards de planos) — alinhado com versão “limpa”
   ========================================================= */
:root{
  --pricing-ink: #2E3F5B;
  --pricing-cyan: #25BACF;
  --pricing-bg: #fff;
  --pricing-soft: rgba(37,186,207,.12);
}

.pricing-grid{
  display:grid; gap: 24px; margin-top: 18px;
  grid-template-columns: repeat(3, minmax(0,1fr));
}
.pricing-card{
  position:relative; display:flex; flex-direction:column;
  background: linear-gradient(180deg, #ffffff 0%, #fbfeff 100%);
  border-radius: 20px;
  border: 2px solid rgba(37,186,207,.12);
  box-shadow: 0 10px 28px rgba(17, 28, 43, .08);
  padding: 22px 20px;
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.pricing-card:hover{
  transform: translateY(-8px);
  box-shadow: 0 24px 54px rgba(17, 28, 43, .14);
  border-color: var(--pricing-cyan);
}
.pricing-card.featured{
  border-color: var(--pricing-cyan);
  box-shadow: 0 22px 60px rgba(37,186,207,.18);
  background:
    radial-gradient(120% 120% at 50% -10%, rgba(37,186,207,.12) 0%, transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #f5feff 100%);
}
.pricing-badge{
  position:absolute; top:-14px; right:18px;
  background: var(--pricing-cyan); color:#fff; font-weight:800;
  padding: 6px 12px; border-radius: 999px; font-size:.78rem;
  box-shadow: 0 10px 22px rgba(37,186,207,.35);
}
.pricing-head{ color: var(--pricing-ink); }
.pricing-title{ margin:0 0 2px; font-weight:800; letter-spacing:.2px; }
.pricing-kicker{ margin:0 0 10px; opacity:.85; }
.pricing-price{ display:flex; align-items:baseline; gap:8px; margin: 6px 0 8px; }
.pricing-price .price{ font-weight:800; color: var(--pricing-ink); }
.pricing-price .unit{ opacity:.55; }

.pricing-features{
  list-style:none; padding:0; margin: 6px 0 12px; display:grid; gap:10px;
}
.pricing-features li{ display:flex; align-items:flex-start; gap:10px; line-height:1.4; }
.pricing-features .check{ width:18px; height:18px; flex:0 0 18px; color: var(--pricing-cyan); margin-top: 2px; }

.pricing-meta{ display:flex; flex-wrap:wrap; gap:10px; margin: 8px 0 14px; }
.chip{
  display:inline-flex; align-items:center; gap:6px;
  border-radius: 999px; padding:6px 10px; font-size:.85rem;
  background: var(--pricing-soft); color: var(--pricing-ink);
  border: 1px solid rgba(37,186,207,.18);
}

.pricing-cta{ margin-top:auto; }
.pricing-cta .cta-comprar{ min-width:180px; justify-content:center; }
@media (max-width:768px){
  .pricing-grid{ grid-template-columns: 1fr; }
  .pricing-cta .cta-comprar{ width:100%; }
}
@media (max-width:1200px){
  .pricing-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (min-width:1920px){
  .pricing-grid{ gap: 28px; }
}

/* =========================================================
   Animação única (aplicável onde usar .will-animate)
   ========================================================= */
@keyframes fadeUp{ from{ opacity:0; transform:translateY(14px) } to{ opacity:1; transform:none } }
.will-animate{ opacity:0; animation: fadeUp .6s ease both; }
.delay-1{ animation-delay:.04s } .delay-2{ animation-delay:.14s } .delay-3{ animation-delay:.24s }

/* =========================================================
   Acessibilidade
   ========================================================= */
.sr-only{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip: rect(0 0 0 0); white-space:nowrap; border:0; padding:0; margin:-1px;
}

/* =========================================================
   Proteções extras p/ botão de CTA não sumir no mobile
   ========================================================= */
#suporte-planos .pricing-card, .servico-card{
  display:flex; flex-direction:column;
}
#suporte-planos .pricing-cta{ display:flex; align-items:center; }
@media (max-width:768px){
  #suporte-planos .pricing-cta .cta-comprar,
  .servico-cta, .servico-cta-servicos{
    display:inline-flex !important;
    width:100%;
    max-width:none;
  }
}

/* =========================================================
   Paddings responsivos das seções suporte-*
   (mantém consistência com o projeto)
   ========================================================= */
@media (min-width: 1920px){
  .suporte-section{ padding: 60px 300px; }
}
@media (max-width: 768px){
  .suporte-section{ padding: 32px 20px; }
}
@media (max-width: 500px){
  .suporte-section{ padding: 26px 16px; }
}
@media (max-width: 360px){
  .suporte-section{ padding: 20px 12px; }
}

/* === FIX Planos de suporte (mobile) === */

/* 1) Garante grid normal (sem carrossel) */
#suporte-planos .pricing-grid{
  grid-auto-flow: row;
  grid-auto-columns: initial;
}

/* 2) Quebra correta de colunas por breakpoint (força e com especificidade) */
@media (max-width: 1200px){
  #suporte-planos .pricing-grid{
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  }
}
@media (max-width: 768px){
  #suporte-planos .pricing-grid{
    grid-template-columns: 1fr !important;
  }
}

/* 3) Cartões não “estreitam” e ocupam a largura da coluna */
#suporte-planos .pricing-card{
  width: auto;
  min-width: 0;
}

/* 4) Botão: sempre visível e full-width no mobile */
#suporte-planos .pricing-cta{
  margin-top: auto;
  display: flex;
  align-items: center;
}
@media (max-width: 768px){
  #suporte-planos .pricing-cta .cta-comprar{
    display: inline-flex !important;
    width: 100% !important;
    max-width: none !important;
  }
}

/* 5) Tipografia da linha “Sob consulta / contrato” não quebrar a palavra */
#suporte-planos .pricing-price .unit{
  white-space: nowrap;
}

/* 6) Selo “Mais procurado” não empurrar layout no mobile */
@media (max-width: 768px){
  #suporte-planos .pricing-badge{
    top: -10px;
    right: 14px;
    transform: scale(.95);
  }
}

.servico-lista {margin-bottom: 30px;}

@media (max-width: 500px){.servicos-header h2{ font-size: clamp(1.3rem, 6vw, 1.6rem); line-height:1.25; margin-bottom:10px; } .servicos-header p{ font-size:.96rem; line-height:1.5; margin:6px auto 0; max-width:60ch; } }