/* ==========================================================================
   SERVIRA — Página de planos
   Estilo próprio, montado sobre o grid e os utilitários do Bootstrap 5.3.

   A paleta segue a identidade já usada no sistema (servira.com.br):
   navy #0f172a, fundo #f1f5f9, acento azul #2563eb, tipografia Inter.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
    --azul-700: #1d4ed8;
    --azul-600: #2563eb;
    --azul-500: #3b82f6;
    --azul-400: #60a5fa;
    --azul-300: #93c5fd;
    --azul-200: #bfdbfe;
    --azul-100: #dbeafe;
    --azul-50:  #eff6ff;
    --ceu-400:  #38bdf8;

    --navy-950: #020617;
    --navy-900: #0f172a;
    --navy-800: #1e293b;
    --navy-700: #334155;

    --cinza-600: #475569;
    --cinza-500: #64748b;
    --cinza-400: #94a3b8;
    --cinza-300: #cbd5e1;
    --cinza-200: #e2e8f0;
    --cinza-100: #f1f5f9;
    --cinza-50:  #f8fafc;

    --verde-700: #047857;   /* texto verde sobre --verde-100 com contraste AA */
    --verde-600: #059669;
    --verde-100: #d1fae5;

    --ambar-500: #f59e0b;
    --ambar-800: #92400e;
    --ambar-50:  #fffbeb;

    --branco: #ffffff;

    --degrade-marca: linear-gradient(135deg, var(--azul-600) 0%, var(--ceu-400) 100%);

    --raio-sm: 10px;
    --raio:    16px;
    --raio-lg: 24px;
    --raio-pill: 999px;

    --sombra-xs: 0 1px 2px rgba(15, 23, 42, .06);
    --sombra-sm: 0 2px 8px rgba(15, 23, 42, .06);
    --sombra:    0 10px 30px rgba(15, 23, 42, .08);
    --sombra-lg: 0 24px 60px rgba(15, 23, 42, .14);
    --sombra-azul: 0 18px 44px rgba(37, 99, 235, .28);

    --container: 1180px;
    --topo-altura: 72px;
}

/* --------------------------------------------------------------------------
   2. BASE
   -------------------------------------------------------------------------- */
* { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--topo-altura) + 16px);
}

body {
    margin: 0;
    background: var(--branco);
    color: var(--navy-900);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 1rem;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
    font-weight: 700;
    letter-spacing: -.022em;
    line-height: 1.18;
    color: var(--navy-900);
    margin: 0;
}

p { margin: 0; }

a { text-decoration: none; color: var(--azul-600); }
a:hover { color: var(--azul-700); }

img { max-width: 100%; display: block; }

:focus-visible {
    outline: 3px solid var(--azul-400);
    outline-offset: 3px;
    border-radius: 6px;
}

.container-sv {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: 20px;
}

.texto-degrade {
    background: var(--degrade-marca);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

/* Pular para o conteúdo — acessibilidade por teclado */
.pular-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 1200;
    background: var(--navy-900);
    color: #fff;
    padding: .75rem 1.25rem;
    border-radius: 0 0 var(--raio-sm) 0;
}
.pular-link:focus {
    left: 0;
    color: #fff;
}

/* --------------------------------------------------------------------------
   3. RITMO DAS SEÇÕES
   -------------------------------------------------------------------------- */
.secao { padding: clamp(64px, 8vw, 112px) 0; }
.secao-cinza { background: var(--cinza-50); border-block: 1px solid var(--cinza-200); }

/* Planos logo depois da abertura escura: o link "Ver planos" para com a abertura
   fora da tela, sem faixa escura atrás do menu. O espaço de cima garante que o
   título não encoste no menu no celular. */
#planos {
    padding-top: max(calc(var(--topo-altura) + 24px), clamp(64px, 8vw, 112px));
    scroll-margin-top: calc(-1 * var(--topo-altura) - 16px);
}

.cabecalho-secao {
    max-width: 720px;
    margin: 0 auto clamp(40px, 5vw, 64px);
    text-align: center;
}

.etiqueta {
    display: inline-block;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--azul-600);
    background: var(--azul-50);
    border: 1px solid var(--azul-100);
    padding: .3rem .85rem;
    border-radius: var(--raio-pill);
    margin-bottom: 1rem;
}

.titulo-secao { font-size: clamp(1.75rem, 3.6vw, 2.6rem); }

.subtitulo-secao {
    margin-top: 1rem;
    font-size: clamp(1rem, 1.6vw, 1.125rem);
    color: var(--cinza-500);
}

/* --------------------------------------------------------------------------
   4. BOTÕES
   -------------------------------------------------------------------------- */
.btn-sv {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    font-weight: 600;
    font-size: .975rem;
    line-height: 1;
    padding: .95rem 1.6rem;
    border-radius: var(--raio-pill);
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease, border-color .18s ease;
    white-space: nowrap;
}

.btn-sv-primario {
    background: var(--azul-600);
    color: #fff;
    box-shadow: var(--sombra-azul);
}
.btn-sv-primario:hover {
    background: var(--azul-700);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 22px 50px rgba(37, 99, 235, .36);
}

.btn-sv-secundario {
    background: var(--branco);
    color: var(--navy-900);
    border-color: var(--cinza-300);
    box-shadow: var(--sombra-xs);
}
.btn-sv-secundario:hover {
    border-color: var(--azul-400);
    color: var(--azul-700);
    transform: translateY(-2px);
}

.btn-sv-claro {
    background: rgba(255, 255, 255, .1);
    color: #fff;
    border-color: rgba(255, 255, 255, .28);
    backdrop-filter: blur(6px);
}
.btn-sv-claro:hover {
    background: rgba(255, 255, 255, .2);
    color: #fff;
    border-color: rgba(255, 255, 255, .5);
    transform: translateY(-2px);
}

.btn-sv-bloco { width: 100%; }
.btn-sv-sm { padding: .65rem 1.15rem; font-size: .875rem; }

/* --------------------------------------------------------------------------
   5. TOPO FIXO
   -------------------------------------------------------------------------- */
.topo {
    position: sticky;
    top: 0;
    z-index: 1030;
    height: var(--topo-altura);
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, .82);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid transparent;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.topo.rolado {
    border-bottom-color: var(--cinza-200);
    box-shadow: var(--sombra-xs);
}

.topo-interno {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    width: 100%;
}

.marca {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    font-weight: 800;
    font-size: 1.2rem;
    letter-spacing: -.03em;
    color: var(--navy-900);
}
.marca:hover { color: var(--navy-900); }
.marca img {
    width: 36px;
    height: 36px;
    object-fit: contain;
    filter: drop-shadow(0 3px 8px rgba(37, 99, 235, .35));
    transition: transform .25s ease;
}
.marca:hover img { transform: scale(1.07) rotate(-4deg); }

/* Topo enxuto: marca à esquerda; à direita, três ações em ordem crescente
   de destaque — link "Ver planos", botão "Entrar" e "Fale conosco". */
.topo-acoes { display: flex; align-items: center; gap: .6rem; }

.link-topo {
    padding: .5rem .85rem;
    font-size: .9rem;
    font-weight: 600;
    color: var(--cinza-600);
    border-radius: var(--raio-pill);
    transition: color .15s ease, background-color .15s ease;
}
.link-topo:hover { color: var(--azul-700); background: var(--azul-50); }

.btn-entrar i { font-size: .9rem; color: var(--azul-600); }

/* --------------------------------------------------------------------------
   6. HERO
   -------------------------------------------------------------------------- */
.hero {
    position: relative;
    overflow: hidden;
    background: radial-gradient(1000px 520px at 15% -10%, #1e3a8a 0%, transparent 60%),
                radial-gradient(900px 480px at 88% 8%, #0c4a6e 0%, transparent 58%),
                linear-gradient(170deg, var(--navy-900) 0%, var(--navy-950) 100%);
    color: #fff;
    padding: clamp(64px, 9vw, 120px) 0 clamp(72px, 9vw, 116px);
}

/* trama sutil de grade ao fundo */
.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(circle at 50% 30%, #000 0%, transparent 72%);
    -webkit-mask-image: radial-gradient(circle at 50% 30%, #000 0%, transparent 72%);
    pointer-events: none;
}

.hero-conteudo { position: relative; z-index: 1; max-width: 860px; margin: 0 auto; text-align: center; }

.hero .etiqueta {
    color: var(--azul-300);
    background: rgba(59, 130, 246, .14);
    border-color: rgba(96, 165, 250, .32);
}

.hero h1 {
    color: #fff;
    font-size: clamp(2.1rem, 5.4vw, 3.9rem);
    letter-spacing: -.035em;
    margin-bottom: 1.25rem;
}

.hero-sub {
    font-size: clamp(1.02rem, 1.9vw, 1.24rem);
    color: #cbd5e1;
    max-width: 680px;
    margin: 0 auto 2.25rem;
}

.hero-acoes {
    display: flex;
    flex-wrap: wrap;
    gap: .85rem;
    justify-content: center;
}

.selos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .6rem 1.9rem;
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, .11);
}
.selo {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .86rem;
    font-weight: 500;
    color: #94a3b8;
}
.selo i { color: var(--azul-400); font-size: .92rem; }

/* --------------------------------------------------------------------------
   7. NÚMEROS (só aparece se preenchido no config)
   -------------------------------------------------------------------------- */
.numeros {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1.5rem;
    text-align: center;
}
.numero-valor {
    font-size: clamp(2rem, 4vw, 2.9rem);
    font-weight: 800;
    letter-spacing: -.04em;
    line-height: 1;
}
.numero-rotulo {
    margin-top: .5rem;
    font-size: .9rem;
    color: var(--cinza-500);
}

/* --------------------------------------------------------------------------
   8. RECURSOS
   -------------------------------------------------------------------------- */
.grade-recursos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: 1.1rem;
}

.card-recurso {
    background: var(--branco);
    border: 1px solid var(--cinza-200);
    border-radius: var(--raio);
    padding: 1.6rem 1.5rem;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    height: 100%;
}
.card-recurso:hover {
    transform: translateY(-4px);
    border-color: var(--azul-300);
    box-shadow: var(--sombra);
}

.icone-recurso {
    width: 46px;
    height: 46px;
    border-radius: 13px;
    display: grid;
    place-items: center;
    font-size: 1.15rem;
    color: #fff;
    background: var(--degrade-marca);
    box-shadow: 0 8px 20px rgba(37, 99, 235, .3);
    margin-bottom: 1.1rem;
}

.card-recurso h3 { font-size: 1.075rem; margin-bottom: .45rem; }
.card-recurso p { font-size: .925rem; color: var(--cinza-500); }

/* --------------------------------------------------------------------------
   8b. DEMONSTRAÇÃO "VEJA O SERVIRA FUNCIONANDO NA PRÁTICA"
   Miniatura do painel do sistema (menu azul-marinho #0f172a, fundo #f1f5f9,
   cartões brancos, Inter) mostrando uma venda percorrendo a operação.
   -------------------------------------------------------------------------- */
.secao-demo {
    position: relative;
    overflow: hidden;
    color: #fff;
    background: radial-gradient(900px 480px at 85% 0%, #1e3a8a 0%, transparent 60%),
                radial-gradient(800px 420px at 8% 100%, #0c4a6e 0%, transparent 60%),
                linear-gradient(170deg, var(--navy-900) 0%, var(--navy-950) 100%);
}
.secao-demo::before {
    /* a mesma trama sutil de grade do topo do site */
    content: '';
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(circle at 50% 20%, #000 0%, transparent 70%);
    -webkit-mask-image: radial-gradient(circle at 50% 20%, #000 0%, transparent 70%);
    pointer-events: none;
}
.secao-demo .container-sv { position: relative; }
.secao-demo .titulo-secao { color: #fff; text-wrap: balance; }
.secao-demo .subtitulo-secao { color: #cbd5e1; }
.secao-demo .etiqueta {
    color: var(--azul-300);
    background: rgba(59, 130, 246, .14);
    border-color: rgba(96, 165, 250, .32);
}

/* Linha de progresso: Pedido, Cozinha, Caixa, Estoque, Financeiro, Dashboard */
.demo-etapas {
    --circulo: 2.75rem;
    position: relative;
    display: flex;
    list-style: none;
    max-width: 900px;
    margin: 0 auto 2rem;
    padding: 0;
}
.demo-etapas li {
    position: relative;
    z-index: 1;
    flex: 1 1 0;
    display: flex;
    justify-content: center;
}
.demo-etapas::before,
.demo-etapas::after {
    content: '';
    position: absolute;
    top: calc(var(--circulo) / 2 - 1px);
    left: 8.333%;
    height: 2px;
    border-radius: 2px;
}
.demo-etapas::before { right: 8.333%; background: rgba(255, 255, 255, .14); }
.demo-etapas::after {
    width: calc(83.333% * var(--demo-progresso, 0));
    background: var(--degrade-marca);
    transition: width .6s cubic-bezier(.2, .7, .3, 1);
}
.demo-etapa {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .55rem;
    padding: 0;
    border: 0;
    background: none;
    color: #94a3b8;
    font: inherit;
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
    transition: color .3s ease;
}
.demo-etapa-icone {
    display: grid;
    place-items: center;
    width: var(--circulo);
    height: var(--circulo);
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .18);
    background: var(--navy-900);
    color: #94a3b8;
    font-size: 1rem;
    transition: background-color .3s ease, border-color .3s ease, color .3s ease;
}
.demo-etapa:hover .demo-etapa-icone { border-color: var(--azul-400); color: #fff; }
.demo-etapa.feita .demo-etapa-icone {
    background: var(--azul-700);
    border-color: var(--azul-600);
    color: #fff;
}
.demo-etapa.ativa { color: #fff; }
.demo-etapa.ativa .demo-etapa-icone {
    background: var(--azul-600);
    border-color: var(--azul-300);
    color: #fff;
    animation: demoPulso 2s ease-out infinite;
}

/* A janela do sistema */
.demo-janela {
    max-width: 1040px;
    margin: 0 auto;
    border-radius: 18px;
    background: #fff;
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(2, 6, 23, .55), 0 0 0 1px rgba(255, 255, 255, .08);
    color: var(--navy-900);
}
.demo-barra {
    display: flex;
    align-items: center;
    gap: 1rem;
    height: 38px;
    padding: 0 1rem;
    background: #e2e8f0;
    border-bottom: 1px solid #cbd5e1;
}
.demo-bolinhas { display: flex; gap: 6px; }
.demo-bolinhas i { width: 10px; height: 10px; border-radius: 50%; background: #f87171; }
.demo-bolinhas i:nth-child(2) { background: #fbbf24; }
.demo-bolinhas i:nth-child(3) { background: #34d399; }
.demo-endereco {
    flex: 0 1 280px;
    margin: 0 auto;
    padding: .2rem .75rem;
    border-radius: 6px;
    background: #fff;
    color: var(--cinza-500);
    font-size: .75rem;
    text-align: center;
}
.demo-endereco i { font-size: .65rem; margin-right: .3rem; color: var(--verde-600); }

.demo-app {
    display: grid;
    grid-template-columns: 196px minmax(0, 1fr);
    background: #f1f5f9;
}

/* Menu lateral, igual ao do painel */
.demo-menu {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    padding: .75rem .6rem;
    background: #0f172a;
}
.demo-menu-marca {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin-bottom: .45rem;
    padding: .35rem .45rem .85rem;
    border-bottom: 1px solid #1e293b;
    color: #fff;
    font-size: .95rem;
    font-weight: 700;
}
.demo-menu-logo {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: #fff;
}
.demo-menu-item {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .5rem .6rem;
    border-radius: 8px;
    color: #94a3b8;
    font-size: .82rem;
    font-weight: 500;
    white-space: nowrap;
    transition: background-color .35s ease, color .35s ease, box-shadow .35s ease;
}
.demo-menu-item i { width: 1rem; text-align: center; font-size: .85rem; }
.demo-menu-item.ativo {
    background: rgba(37, 99, 235, .2);
    color: #fff;
    box-shadow: inset 3px 0 0 var(--azul-500);
}

/* Telas: todas no mesmo lugar; a ativa aparece por cima, com transição suave.
   A altura é a da maior tela, então nada "pula" ao trocar de etapa. */
.demo-telas { display: grid; }
.demo-tela {
    grid-area: 1 / 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity .45s ease, transform .45s ease, visibility .45s;
}
.demo-tela.ativa { opacity: 1; visibility: visible; transform: none; }

.demo-tela-topo {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .75rem 1.25rem;
    background: #fff;
    border-bottom: 1px solid #e2e8f0;
    font-size: .95rem;
    font-weight: 700;
}
.demo-tela-icone {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--azul-50);
    color: var(--azul-600);
    font-size: .8rem;
}
.demo-tela-passo { display: none; }
.demo-tela-icones {
    display: flex;
    align-items: center;
    gap: .8rem;
    margin-left: auto;
    color: var(--cinza-500);
    font-size: .9rem;
}
.demo-avatar {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--azul-600);
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
}
.demo-tela-corpo {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: .85rem;
    padding: 1.25rem;
    font-size: .85rem;
    line-height: 1.45;
}

/* Pedido e Caixa: cartão à esquerda, avisos à direita */
.demo-corpo-duplo {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    align-items: start;
    gap: .85rem 1rem;
}
.demo-corpo-duplo .demo-cartao { max-width: none; }
.demo-lateral { display: flex; flex-direction: column; gap: .75rem; }
.demo-lateral .demo-alerta { max-width: none; }

/* Peças reaproveitadas pelas telas */
.demo-cartao,
.demo-metrica,
.demo-painel,
.demo-tabela {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .08);
}
.demo-cartao {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    max-width: 470px;
    padding: 1rem 1.1rem;
}
.demo-cartao-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    font-size: .95rem;
}
.demo-chip {
    padding: .2rem .55rem;
    border: 1px solid var(--azul-100);
    border-radius: var(--raio-pill);
    background: var(--azul-50);
    color: var(--azul-700);
    font-size: .72rem;
    font-weight: 600;
    white-space: nowrap;
}
.demo-linhas { display: grid; gap: .45rem; margin: 0; padding: 0; list-style: none; }
.demo-linhas li {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .55rem .7rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #f8fafc;
}
.demo-qtd { font-weight: 700; color: var(--azul-700); }
.demo-linha-nome { flex: 1; min-width: 0; }
.demo-linha-valor { font-weight: 600; white-space: nowrap; }
.demo-total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding-top: .6rem;
    border-top: 1px dashed #e2e8f0;
    color: var(--cinza-600);
    font-weight: 600;
}
.demo-total strong { color: var(--navy-900); font-size: 1.15rem; white-space: nowrap; }
.demo-total-grande strong { font-size: 1.5rem; letter-spacing: -.02em; }
.demo-botao {
    padding: .65rem;
    border-radius: 8px;
    background: var(--azul-600);
    color: #fff;
    font-weight: 600;
    text-align: center;
    transition: background-color .3s ease;
}
.demo-botao-depois { display: none; }
.demo-botao.enviado { background: var(--verde-600); }
.demo-botao.enviado .demo-botao-antes { display: none; }
.demo-botao.enviado .demo-botao-depois { display: inline; }
.demo-rotulo-pequeno { margin-bottom: -.35rem; color: var(--cinza-500); font-size: .72rem; font-weight: 600; }
.demo-formas { display: flex; flex-wrap: wrap; gap: .4rem; }
.demo-forma {
    padding: .35rem .75rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    color: var(--cinza-600);
    font-size: .78rem;
    font-weight: 600;
    transition: background-color .3s ease, border-color .3s ease, color .3s ease;
}
.demo-forma.selecionada { border-color: var(--azul-600); background: var(--azul-50); color: var(--azul-700); }

.demo-alerta {
    display: flex;
    align-items: center;
    gap: .65rem;
    max-width: 470px;
    padding: .7rem .9rem;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #fff;
    box-shadow: var(--sombra-xs);
    color: var(--cinza-600);
    font-size: .82rem;
}
.demo-alerta strong { margin-right: .25rem; color: var(--navy-900); }
.demo-alerta-icone {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--azul-50);
    color: var(--azul-600);
    font-size: .72rem;
}
.demo-alerta-ok .demo-alerta-icone { background: var(--verde-100); color: var(--verde-700); }
.demo-alerta-final { max-width: none; border-color: var(--navy-900); background: var(--navy-900); color: #cbd5e1; }
.demo-alerta-final strong { color: #fff; }
.demo-alerta-final .demo-alerta-icone { background: var(--azul-600); color: #fff; }

/* Cozinha (KDS) */
.demo-kds { flex: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-content: start; gap: .75rem; }
.demo-kds-coluna {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    min-height: 250px;
    padding: .6rem;
    border-radius: 10px;
    background: #e8edf4;
}
.demo-kds-titulo {
    display: flex;
    align-items: center;
    gap: .4rem;
    color: var(--cinza-600);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.demo-kds-titulo::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--azul-500); }
.demo-kds-em_preparo::before { background: var(--ambar-500); }
.demo-kds-pronto::before { background: var(--verde-600); }
.demo-kds-card {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    padding: .6rem .65rem;
    border-left: 3px solid #cbd5e1;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .08);
    font-size: .78rem;
}
.demo-kds-card-topo { display: flex; justify-content: space-between; gap: .4rem; }
.demo-kds-tempo {
    padding: .05rem .4rem;
    border-radius: var(--raio-pill);
    background: #f1f5f9;
    color: var(--cinza-500);
    font-size: .68rem;
    white-space: nowrap;
}
.demo-kds-item { color: var(--cinza-600); }
.demo-kds-card.destaque {
    border-left-color: var(--azul-600);
    box-shadow: 0 0 0 2px rgba(37, 99, 235, .22), 0 6px 16px rgba(37, 99, 235, .16);
}
.demo-kds-acao {
    margin-top: .3rem;
    padding: .3rem;
    border-radius: 6px;
    background: var(--azul-600);
    color: #fff;
    font-size: .72rem;
    font-weight: 600;
    text-align: center;
}
[data-coluna="em_preparo"] .demo-kds-acao { background: #d97706; }
[data-coluna="pronto"] .demo-kds-acao { background: var(--verde-100); color: var(--verde-700); }
.demo-kds-card.movido { animation: demoEntra .45s cubic-bezier(.2, .7, .3, 1); }

/* Estoque */
.demo-faixa {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .6rem .85rem;
    border: 1px solid var(--azul-100);
    border-radius: 8px;
    background: var(--azul-50);
    color: var(--azul-700);
    font-size: .8rem;
    font-weight: 600;
}
.demo-tabela { overflow: hidden; }
.demo-tabela-cabeca,
.demo-tabela-linha {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: .5rem;
    padding: .65rem .9rem;
}
.demo-tabela-cabeca {
    background: #f8fafc;
    color: var(--cinza-500);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}
.demo-tabela-linha { border-top: 1px solid #f1f5f9; }
.demo-saida {
    justify-self: start;
    padding: .1rem .5rem;
    border-radius: var(--raio-pill);
    background: #fee2e2;
    color: #b91c1c;
    font-size: .72rem;
    font-weight: 700;
}
.demo-estoque { font-weight: 700; white-space: nowrap; }

/* Financeiro e Visão geral */
.demo-filtros { display: flex; gap: .35rem; }
.demo-filtros span {
    white-space: nowrap;
    padding: .3rem .65rem;
    border: 1px solid #e2e8f0;
    border-radius: var(--raio-pill);
    background: #fff;
    color: var(--cinza-500);
    font-size: .72rem;
    font-weight: 600;
}
.demo-filtros .ativo { border-color: var(--azul-600); background: var(--azul-600); color: #fff; }
.demo-metricas { display: grid; gap: .75rem; }
.demo-metricas-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.demo-metricas-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.demo-metrica { display: flex; flex-direction: column; gap: .2rem; padding: .8rem .9rem; }
.demo-metrica-rotulo { color: var(--cinza-500); font-size: .72rem; font-weight: 500; }
.demo-metrica-valor {
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: -.02em;
    white-space: nowrap;
}
.demo-metrica-valor small { color: var(--cinza-400); font-size: .75rem; font-weight: 600; }
.demo-selo-mais {
    align-self: flex-start;
    margin-top: .2rem;
    padding: .12rem .5rem;
    border-radius: var(--raio-pill);
    background: var(--verde-100);
    color: var(--verde-700);
    font-size: .68rem;
    font-weight: 700;
}
.demo-painel { display: flex; flex-direction: column; gap: .55rem; padding: .85rem .95rem; }
.demo-painel-titulo { font-size: .78rem; font-weight: 700; }
.demo-barra-linha {
    display: grid;
    grid-template-columns: 62px minmax(0, 1fr) auto;
    align-items: center;
    gap: .6rem;
    font-size: .75rem;
}
.demo-barra-trilho { height: 8px; border-radius: var(--raio-pill); background: #f1f5f9; overflow: hidden; }
.demo-barra-cheia {
    display: block;
    height: 100%;
    border-radius: var(--raio-pill);
    background: #cbd5e1;
    transition: width .8s cubic-bezier(.2, .7, .3, 1);
}
.demo-barra-cheia.destaque { background: var(--azul-600); }
.demo-barra-valor { font-weight: 600; white-space: nowrap; }
.demo-paineis { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: .75rem; }
.demo-grafico-caixa { position: relative; }
.demo-grafico { display: block; width: 100%; height: 110px; }
.demo-grafico-area { fill: rgba(37, 99, 235, .1); }
.demo-grafico-linha { fill: none; stroke: #2563eb; stroke-width: 2; vector-effect: non-scaling-stroke; }
.demo-grafico-ponto {
    position: absolute;
    width: 11px;
    height: 11px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: var(--azul-600);
    transform: translate(-50%, -50%);
}
.demo-grafico-ponto.atualizado { animation: demoPulso 1.6s ease-out 2; }
.demo-ranking { display: grid; gap: .45rem; margin: 0; padding: 0; list-style: none; counter-reset: ranking; }
.demo-ranking li { display: flex; align-items: center; gap: .5rem; font-size: .78rem; }
.demo-ranking li::before {
    counter-increment: ranking;
    content: counter(ranking);
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--azul-50);
    color: var(--azul-700);
    font-size: .65rem;
    font-weight: 700;
}
.demo-ranking-qtd { font-weight: 700; white-space: nowrap; }

/* Animações da demonstração (só com JavaScript ativo) */
.demo-js [data-aparece],
.demo-js .demo-kds-card.destaque { transition: opacity .4s ease, transform .4s ease; }
.demo-js .demo-oculto { opacity: 0; transform: translateY(8px); }
.demo-num { transition: color .3s ease; }
.demo-num.mudando { color: var(--azul-600); }
@keyframes demoEntra {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}
@keyframes demoPulso {
    0%   { box-shadow: 0 0 0 0 rgba(59, 130, 246, .5); }
    100% { box-shadow: 0 0 0 12px rgba(59, 130, 246, 0); }
}

/* Legenda da etapa e botão de pausar/continuar */
.demo-rodape {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    max-width: 1040px;
    margin: 1.5rem auto 0;
}
.demo-legenda { display: flex; flex-direction: column; gap: .2rem; color: #cbd5e1; font-size: .95rem; }
.demo-legenda-passo {
    color: var(--azul-300);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.demo-legenda-titulo { color: #fff; font-size: 1.1rem; }
.demo-controle {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    flex-shrink: 0;
    padding: .6rem 1.05rem;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: var(--raio-pill);
    background: rgba(255, 255, 255, .06);
    color: #fff;
    font: inherit;
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .18s ease, border-color .18s ease;
}
.demo-controle:hover { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .4); }
.demo-controle[hidden] { display: none; }
.demo-aviso-dados {
    max-width: 1040px;
    margin: .85rem auto 0;
    color: #94a3b8;
    font-size: .8rem;
}
.demo-aviso-dados i { margin-right: .3rem; }

/* Chamada depois da demonstração */
.demo-cta { max-width: 720px; margin: clamp(48px, 6vw, 72px) auto 0; text-align: center; }
.demo-cta h3 { color: #fff; font-size: clamp(1.35rem, 2.6vw, 1.9rem); }
.demo-cta p { margin: .75rem auto 1.6rem; color: #cbd5e1; font-size: clamp(.98rem, 1.6vw, 1.08rem); }
.demo-cta .btn-sv i { transition: transform .2s ease; }
.demo-cta .btn-sv:hover i { transform: translateX(3px); }


/* --------------------------------------------------------------------------
   8e. SERVIRA AI
   Área "especial": azul-marinho com uma luz azul suave no alto e uma trama
   de pontos bem discreta. As interfaces de exemplo são brancas, como o painel
   do sistema. Nada de neon: continua parecendo software de restaurante.
   -------------------------------------------------------------------------- */
.secao-ai {
    position: relative;
    overflow: hidden;
    color: #fff;
    background: radial-gradient(900px 440px at 50% -8%, rgba(37, 99, 235, .38) 0%, transparent 65%),
                radial-gradient(700px 420px at 100% 100%, rgba(14, 165, 233, .12) 0%, transparent 60%),
                linear-gradient(180deg, #0b1224 0%, var(--navy-950) 100%);
}
.secao-ai::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, .08) 1px, transparent 1px);
    background-size: 22px 22px;
    mask-image: radial-gradient(ellipse at 50% 10%, #000 0%, transparent 60%);
    -webkit-mask-image: radial-gradient(ellipse at 50% 10%, #000 0%, transparent 60%);
    pointer-events: none;
}
/* Sem outra seção entre elas, a demonstração e o Servira AI (as duas escuras)
   ficam encostadas: um fio sutil marca a passagem de uma para a outra. */
.secao-demo + .secao-ai { border-top: 1px solid rgba(148, 163, 184, .16); }
.secao-ai .container-sv { position: relative; }
.secao-ai .etiqueta {
    color: var(--azul-300);
    background: rgba(59, 130, 246, .14);
    border-color: rgba(96, 165, 250, .32);
}
.ai-titulo {
    background: linear-gradient(135deg, #fff 30%, var(--azul-300) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    font-size: clamp(2.2rem, 5vw, 3.4rem);
}
.secao-ai .subtitulo-secao { color: #cbd5e1; }
.ai-destaque {
    display: inline-block;
    margin-top: 1.25rem;
    padding: .55rem 1.1rem;
    border: 1px solid rgba(147, 197, 253, .25);
    border-radius: var(--raio-pill);
    background: rgba(255, 255, 255, .05);
    color: #e2e8f0;
    font-size: .95rem;
    font-weight: 600;
}
.ai-legenda { display: flex; justify-content: center; gap: 1.1rem; margin-top: 1rem; }

/* Selo de status (● Disponível / ● Em breve) */
.ai-status {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .75rem;
    font-weight: 700;
    white-space: nowrap;
    color: #6ee7b7;
}
.ai-status.em-breve { color: var(--azul-300); }
.ai-ponto { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
/* Dentro das interfaces brancas, as cores escurecem para manter o contraste */
.ai-painel .ai-status,
.ai-mini .ai-status { color: var(--verde-700); }
.ai-painel .ai-status.em-breve { color: var(--azul-700); }

/* Pergunte ao Servira */
.ai-demo {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    align-items: start;
    gap: 1.5rem;
    max-width: 1080px;
    margin: 0 auto;
}
.ai-painel {
    overflow: hidden;
    border-radius: 20px;
    background: #fff;
    color: var(--navy-900);
    box-shadow: 0 30px 80px rgba(2, 6, 23, .55), 0 0 0 1px rgba(255, 255, 255, .08);
}
.ai-painel-topo {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .9rem 1.2rem;
    border-bottom: 1px solid var(--cinza-100);
    font-size: .95rem;
}
.ai-painel-topo .ai-status { margin-left: auto; }
.ai-painel-icone {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: var(--degrade-marca);
    color: #fff;
    font-size: .8rem;
}
.ai-conversa {
    display: flex;
    flex-direction: column;
    gap: .85rem;
    min-height: 318px;
    padding: 1.2rem;
    background: #f8fafc;
}
.ai-pergunta {
    padding: .75rem .95rem;
    border: 1px solid var(--cinza-200);
    border-radius: 12px;
    background: #fff;
}
.ai-rotulo {
    display: block;
    margin-bottom: .15rem;
    color: var(--cinza-500);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.ai-pergunta-texto { min-height: 1.5em; font-size: 1rem; font-weight: 600; }
.ai-pergunta-texto.digitando::after {
    content: '';
    display: inline-block;
    width: 2px;
    height: 1.05em;
    margin-left: 2px;
    vertical-align: -.15em;
    background: var(--azul-600);
    animation: aiCursor .8s steps(1) infinite;
}
.ai-consultando {
    display: flex;
    align-items: center;
    gap: .5rem;
    color: var(--cinza-500);
    font-size: .82rem;
    transition: opacity .25s ease;
}
.ai-girando { color: var(--azul-600); animation: aiGirar .9s linear infinite; }
.ai-feito { display: none; color: var(--verde-600); }
.ai-consultando.feito .ai-girando { display: none; }
.ai-consultando.feito .ai-feito { display: inline; }

/* Estados da animação (o JavaScript troca as classes) */
.ai-conversa.esperando:not(.consultando) .ai-consultando { visibility: hidden; opacity: 0; }
.ai-conversa.esperando .ai-respostas { visibility: hidden; opacity: 0; }
.ai-respostas { transition: opacity .3s ease; }

.ai-resposta { display: none; }
.ai-resposta.ativa { display: block; animation: aiEntra .4s cubic-bezier(.2, .7, .3, 1); }
.ai-resposta {
    padding: .95rem 1rem;
    border: 1px solid var(--azul-100);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 6px 18px rgba(37, 99, 235, .08);
}
.ai-resposta-texto { font-size: .95rem; line-height: 1.5; }
.ai-resposta-texto strong { color: var(--navy-900); }
.ai-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; margin-top: .85rem; }
.ai-tiles div {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    padding: .6rem .7rem;
    border-radius: 10px;
    background: var(--azul-50);
}
.ai-tiles span { color: var(--cinza-500); font-size: .7rem; font-weight: 600; }
.ai-tiles strong { font-size: 1rem; font-weight: 800; white-space: nowrap; }
.ai-lista { display: grid; gap: .4rem; margin: .8rem 0 0; padding: 0; list-style: none; }
.ai-lista li {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .5rem .65rem;
    border-radius: 8px;
    background: #f8fafc;
    font-size: .85rem;
}
.ai-lista-nome { flex: 1; min-width: 0; }
.ai-lista-valor { font-weight: 700; white-space: nowrap; }
.ai-lista-custo { color: var(--cinza-500); font-size: .8rem; white-space: nowrap; }
.ai-etiqueta {
    padding: .12rem .5rem;
    border-radius: var(--raio-pill);
    font-size: .7rem;
    font-weight: 700;
    white-space: nowrap;
}
.ai-etiqueta-alerta { background: #fee2e2; color: #b91c1c; }
.ai-etiqueta-aviso { background: var(--ambar-50); color: var(--ambar-800); }
.ai-mesas { display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); gap: .3rem; margin-top: .8rem; }
.ai-mesas span {
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    border-radius: 6px;
    background: var(--cinza-100);
    color: var(--cinza-500);
    font-size: .65rem;
    font-weight: 700;
}
.ai-mesas .ocupada { background: var(--azul-600); color: #fff; }
.ai-resposta-breve { border-style: dashed; border-color: var(--azul-200); box-shadow: none; }
.ai-resposta-breve .ai-resposta-texto { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.ai-breve-icone {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--azul-50);
    color: var(--azul-600);
    font-size: .72rem;
}
.ai-enquanto-caixa {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    margin-top: .7rem;
    padding-top: .7rem;
    border-top: 1px solid var(--cinza-100);
    color: var(--cinza-600);
    font-size: .85rem;
}
.ai-enquanto-caixa i { color: var(--azul-600); font-size: .75rem; }
.ai-enquanto-caixa[hidden] { display: none; }

.ai-campo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin: 0 1.2rem 1.2rem;
    padding: .45rem .45rem .45rem 1rem;
    border: 1px solid var(--cinza-200);
    border-radius: var(--raio-pill);
    color: var(--cinza-400);
    font-size: .85rem;
}
.ai-enviar {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--azul-600);
    color: #fff;
    font-size: .75rem;
}

/* Perguntas clicáveis */
.ai-perguntas {
    padding: 1.3rem;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 20px;
    background: rgba(255, 255, 255, .04);
}
.ai-perguntas-titulo { color: #fff; font-size: 1rem; font-weight: 700; }
.ai-grupo { margin: 1rem 0 .55rem; }
.ai-chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.ai-chip {
    padding: .5rem .85rem;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: var(--raio-pill);
    background: rgba(255, 255, 255, .06);
    color: #e2e8f0;
    font: inherit;
    font-size: .84rem;
    text-align: left;
    cursor: pointer;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}
.ai-chip:hover { background: rgba(255, 255, 255, .12); border-color: rgba(147, 197, 253, .45); }
.ai-chip:active { transform: scale(.97); }
.ai-chip[aria-pressed="true"] { border-color: var(--azul-500); background: var(--azul-600); color: #fff; }
.ai-chips-breve .ai-chip { border-style: dashed; color: #cbd5e1; }

/* Quatro pilares */
.ai-pilares {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    max-width: 1080px;
    margin: clamp(48px, 6vw, 72px) auto 0;
    padding: 0;
    list-style: none;
}
.ai-pilar,
.ai-insight {
    padding: 1.3rem;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: var(--raio);
    background: rgba(255, 255, 255, .04);
    transition: border-color .25s ease, background-color .25s ease;
}
@media (hover: hover) {
    .ai-pilar:hover,
    .ai-insight:hover { border-color: rgba(147, 197, 253, .35); background: rgba(255, 255, 255, .06); }
}
.ai-pilar-icone {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    margin-bottom: .9rem;
    border-radius: 12px;
    background: var(--degrade-marca);
    color: #fff;
    font-size: .95rem;
    box-shadow: 0 8px 20px rgba(37, 99, 235, .3);
}
.ai-pilar h3 { margin-bottom: .35rem; color: #fff; font-size: 1.05rem; }
.ai-pilar p { margin-bottom: .8rem; color: #cbd5e1; font-size: .9rem; line-height: 1.5; }

/* Insights sem precisar perguntar */
.ai-insights { max-width: 1080px; margin: clamp(48px, 6vw, 72px) auto 0; }
.ai-bloco-cabeca { margin-bottom: 1.25rem; }
.ai-bloco-cabeca h3 { color: #fff; font-size: clamp(1.3rem, 2.4vw, 1.6rem); }
.ai-bloco-cabeca p { margin-top: .3rem; color: #cbd5e1; }
.ai-insights-grade {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.ai-insight { display: flex; flex-direction: column; gap: .75rem; }
.ai-insight-topo { display: flex; align-items: center; gap: .6rem; }
.ai-insight-icone {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: rgba(59, 130, 246, .18);
    color: var(--azul-300);
    font-size: .85rem;
}
.ai-insight-categoria { color: #94a3b8; font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.ai-insight-texto { flex: 1; color: #f1f5f9; font-size: .98rem; line-height: 1.5; }
.ai-insight-rodape { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .75rem; }
.ai-onde { color: #94a3b8; font-size: .78rem; }
.ai-insight-em-breve { border-style: dashed; }
.ai-insight-em-breve .ai-insight-texto { color: #cbd5e1; }

/* Estoque inteligente e margem */
.ai-recursos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
    max-width: 1080px;
    margin: clamp(48px, 6vw, 72px) auto 0;
}
.ai-recurso {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding: 1.5rem;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: var(--raio-lg);
    background: rgba(255, 255, 255, .04);
}
.ai-recurso-texto h3 { color: #fff; font-size: clamp(1.25rem, 2.2vw, 1.5rem); }
.ai-recurso-texto p { margin: .45rem 0 .7rem; color: #cbd5e1; font-size: .95rem; }
.ai-mini {
    margin-top: auto;
    padding: 1rem 1.1rem;
    border-radius: 14px;
    background: #fff;
    color: var(--navy-900);
    box-shadow: 0 18px 40px rgba(2, 6, 23, .4);
}
.ai-mini-titulo { display: flex; align-items: center; gap: .5rem; font-size: .9rem; font-weight: 700; }
.ai-mini-titulo i { color: var(--azul-600); }
.ai-mini .ai-lista { margin-top: .7rem; }
.ai-mini-total {
    display: flex;
    justify-content: space-between;
    margin-top: .7rem;
    padding-top: .6rem;
    border-top: 1px dashed var(--cinza-200);
    color: var(--cinza-600);
    font-size: .85rem;
}
.ai-margem { display: grid; gap: .45rem; margin: .8rem 0 0; }
.ai-margem div { display: flex; justify-content: space-between; gap: .75rem; font-size: .88rem; }
.ai-margem dt { color: var(--cinza-500); font-weight: 500; }
.ai-margem dd { margin: 0; font-weight: 700; white-space: nowrap; }
.ai-positivo { color: var(--verde-700); }
.ai-margem-barra { height: 10px; margin-top: .9rem; overflow: hidden; border-radius: var(--raio-pill); background: var(--verde-100); }
.ai-margem-custo { display: block; height: 100%; background: var(--cinza-300); }
.ai-margem-legenda { display: flex; justify-content: space-between; margin-top: .35rem; color: var(--cinza-500); font-size: .72rem; }

/* Chamada final */
.ai-cta { max-width: 680px; margin: clamp(48px, 6vw, 72px) auto 0; text-align: center; }
.ai-cta h3 { color: #fff; font-size: clamp(1.35rem, 2.6vw, 1.9rem); text-wrap: balance; }
.ai-cta > p:not(.ai-aviso) { margin: .75rem auto 1.5rem; color: #cbd5e1; }
.ai-cta .btn-sv i { transition: transform .2s ease; }
.ai-cta .btn-sv:hover i { transform: translateX(3px); }
.ai-aviso { margin-top: 1.1rem; color: #94a3b8; font-size: .8rem; }
.ai-aviso i { margin-right: .3rem; }

@keyframes aiEntra {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}
@keyframes aiGirar { to { transform: rotate(360deg); } }
@keyframes aiCursor { 50% { opacity: 0; } }

/* --------------------------------------------------------------------------
   8d. IMPLANTAÇÃO ("Começar com o Servira é mais simples do que parece")
   Linha do tempo horizontal no computador e vertical no tablet/celular.
   Os conectores entre as etapas se preenchem conforme a seção aparece.
   -------------------------------------------------------------------------- */
.secao-implantacao {
    border-top: 1px solid var(--cinza-100);
    background: linear-gradient(180deg, #f5f9ff 0%, var(--branco) 60%);
}
.secao-implantacao .titulo-secao { text-wrap: balance; }

.jornada {
    --marcador: 3.5rem;
    display: grid;
    grid-template-columns: repeat(var(--etapas, 5), minmax(0, 1fr));
    max-width: 1120px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
}
.jornada-etapa {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 .9rem;
    text-align: center;
}

/* Conector até a próxima etapa: trilho cinza + preenchimento azul */
.jornada-etapa:not(:last-child)::before,
.jornada-etapa:not(:last-child)::after {
    content: '';
    position: absolute;
    top: calc(var(--marcador) / 2 - 1px);
    left: calc(50% + var(--marcador) / 2 + 8px);
    right: calc(-50% + var(--marcador) / 2 + 8px);
    height: 2px;
    border-radius: 2px;
}
.jornada-etapa:not(:last-child)::before { background: var(--cinza-200); }
.jornada-etapa:not(:last-child)::after {
    background: var(--degrade-marca);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .7s cubic-bezier(.2, .7, .3, 1);
}
.jornada-etapa.conectada::after { transform: scaleX(1); }

.jornada-marcador {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: var(--marcador);
    height: var(--marcador);
    border: 2px solid var(--cinza-200);
    border-radius: 50%;
    background: var(--branco);
    color: var(--cinza-400);
    font-size: 1rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    transition: background-color .45s ease, border-color .45s ease, color .45s ease, box-shadow .45s ease;
}
.jornada-etapa.ativa .jornada-marcador {
    border-color: var(--azul-600);
    background: var(--azul-600);
    color: #fff;
    box-shadow: 0 0 0 6px rgba(37, 99, 235, .12), 0 10px 24px rgba(37, 99, 235, .25);
}

.jornada-conteudo {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 1.4rem;
    transition: opacity .45s ease, transform .45s ease;
}
/* Só com JavaScript: etapas ainda não alcançadas ficam apagadas */
.jornada-js .jornada-etapa:not(.ativa) .jornada-conteudo { opacity: .45; transform: translateY(6px); }

.jornada-icone {
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    margin-bottom: .85rem;
    border: 1px solid var(--azul-100);
    border-radius: 12px;
    background: var(--azul-50);
    color: var(--azul-600);
    font-size: 1rem;
}
.jornada-titulo { margin-bottom: .45rem; font-size: 1.02rem; text-wrap: balance; }
.jornada-texto { color: var(--cinza-500); font-size: .9rem; line-height: 1.55; }

.jornada-prazo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    margin-top: 2rem;
    color: var(--navy-700);
    font-size: .95rem;
}
.jornada-prazo i { color: var(--azul-600); }

/* "Você não precisa descobrir tudo sozinho." */
.implantacao-apoio {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(24px, 4vw, 48px);
    max-width: 1040px;
    margin: clamp(48px, 6vw, 72px) auto 0;
    padding: clamp(28px, 4vw, 44px);
    border-radius: var(--raio-lg);
    background: radial-gradient(640px 320px at 12% 0%, #1e3a8a 0%, transparent 65%),
                linear-gradient(140deg, var(--navy-900) 0%, var(--navy-950) 100%);
    box-shadow: var(--sombra-lg);
    color: #fff;
}
.implantacao-mensagem {
    margin-bottom: .6rem;
    color: var(--azul-300);
    font-size: .9rem;
    font-weight: 700;
}
.implantacao-apoio h3 { color: #fff; font-size: clamp(1.35rem, 2.4vw, 1.75rem); text-wrap: balance; }
.implantacao-apoio-texto > p:not(.implantacao-mensagem) { margin-top: .6rem; color: #cbd5e1; }
.implantacao-acoes { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }

.implantacao-checklist {
    padding: 1.4rem 1.5rem;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: var(--raio);
    background: rgba(255, 255, 255, .06);
}
.implantacao-checklist-titulo { margin-bottom: .9rem; color: #fff; font-size: .95rem; font-weight: 700; }
.implantacao-checklist ul { display: grid; gap: .7rem; margin: 0; padding: 0; list-style: none; }
.implantacao-checklist li { display: flex; align-items: center; gap: .65rem; color: #e2e8f0; font-size: .95rem; }
.implantacao-checklist .check { margin-top: 0; background: rgba(59, 130, 246, .28); color: #fff; }

/* --------------------------------------------------------------------------
   9. PLANO ÚNICO (Servira Completo)
   Uma oferta só: preço e botões de um lado, tudo o que está incluso do outro.
   No celular, vira uma coluna: oferta em cima, recursos embaixo.
   (Substituiu os três cards e a tabela comparativa em 02/10/2026.)
   -------------------------------------------------------------------------- */

/* Seletor mensal / anual (componente que já existia) */
.alternador {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    background: var(--cinza-100);
    border: 1px solid var(--cinza-200);
    padding: .3rem;
    border-radius: var(--raio-pill);
}
.alternador button {
    border: 0;
    background: transparent;
    color: var(--cinza-600);
    font-weight: 600;
    font-size: .9rem;
    padding: .6rem 1.35rem;
    border-radius: var(--raio-pill);
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}
.alternador button[aria-pressed="true"] {
    background: var(--branco);
    color: var(--navy-900);
    box-shadow: var(--sombra-sm);
}
.tag-economia {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: #047857;   /* verde mais escuro que --verde-600, para o texto pequeno ter contraste */
    background: var(--verde-100);
    padding: .2rem .45rem;
    border-radius: var(--raio-pill);
    white-space: nowrap;
}

/* O card: fundo branco, borda suave, um único detalhe azul no alto */
.oferta {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    max-width: 1120px;
    margin: 0 auto;
    background: var(--branco);
    border: 1px solid var(--cinza-200);
    border-radius: var(--raio-lg);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 24px 56px -16px rgba(15, 23, 42, .14);
}

/* Lado da oferta: azul bem claro para separar do lado dos recursos */
.oferta-principal {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: clamp(28px, 3.6vw, 48px);
    background: linear-gradient(180deg, var(--azul-50) 0%, rgba(239, 246, 255, .35) 100%);
    border-right: 1px solid var(--azul-100);
    border-radius: var(--raio-lg) 0 0 var(--raio-lg);
}
.oferta-principal::before {
    content: '';
    position: absolute;
    top: -1px;
    left: clamp(28px, 3.6vw, 48px);
    width: 56px;
    height: 3px;
    border-radius: 0 0 3px 3px;
    background: var(--azul-600);
}

.selo-completo {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    line-height: 1.2;
    color: var(--azul-700);
    background: var(--branco);
    border: 1px solid var(--azul-200);
    padding: .4rem .8rem;
    border-radius: var(--raio-pill);
}
.selo-completo i { color: var(--azul-600); }

.oferta-nome {
    margin-top: 1.25rem;
    font-size: clamp(1.35rem, 2.2vw, 1.6rem);
    font-weight: 800;
    letter-spacing: .03em;
    text-transform: uppercase;
}
.oferta-principal .alternador { margin-top: 1.4rem; display: flex; width: 100%; }
/* Três ciclos: botões de mesma largura, com a tarjinha abaixo do nome */
.oferta-principal .alternador button {
    flex: 1 1 0;
    min-width: 0;
    flex-direction: column;
    justify-content: center;
    gap: .2rem;
    padding: .5rem .4rem;
    border-radius: 1rem;
}

/* Preço: o maior elemento da seção */
.oferta-valor { margin-top: 1.6rem; }
.oferta-preco {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    line-height: 1;
    color: var(--navy-900);
}
.oferta-preco .preco-moeda {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--cinza-500);
    margin-right: .2rem;
}
.oferta-preco .preco-inteiro {
    font-size: clamp(3.4rem, 6vw, 4.5rem);
    font-weight: 800;
    letter-spacing: -.05em;
}
.oferta-preco .preco-centavos {
    font-size: 1.9rem;
    font-weight: 700;
    letter-spacing: -.02em;
}
.oferta-preco .preco-sufixo {
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--cinza-500);
    margin-left: .3rem;
}
.oferta-frase {
    margin-top: .9rem;
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--navy-800);
}
.oferta-frase i { color: var(--azul-600); font-size: .9rem; }
.oferta-nota { margin-top: .3rem; font-size: .875rem; color: var(--cinza-500); }

/* Economia do anual: no mensal é uma dica discreta; no anual vira pílula verde */
.oferta-economia {
    display: inline-block;
    margin-top: .45rem;
    padding: .3rem 0;
    font-size: .8125rem;
    font-weight: 500;
    line-height: 1.3;
    color: var(--cinza-500);
    border-radius: var(--raio-pill);
    transition: background-color .25s ease, color .25s ease, padding .25s ease;
}
[data-ciclo-ativo="anual"] .oferta-economia,
[data-ciclo-ativo="trienal"] .oferta-economia {
    padding-inline: .7rem;
    font-weight: 600;
    color: #047857;
    background: var(--verde-100);
}

/* Botões: o principal em destaque, o secundário logo abaixo */
.oferta-acoes { display: grid; gap: .7rem; width: 100%; margin-top: 1.75rem; }
.oferta-cta { padding-block: 1.1rem; font-size: 1.02rem; }
.oferta .btn-sv { white-space: normal; text-align: center; }
.oferta-cta i { font-size: .9rem; transition: transform .2s ease; }
.oferta-cta:hover i { transform: translateX(3px); }

.oferta-aviso {
    display: flex;
    align-items: baseline;
    gap: .45rem;
    margin-top: 1rem;
    font-size: .8125rem;
    color: var(--cinza-500);
}
.oferta-aviso i { color: var(--azul-600); }
/* O aviso abaixo dos botões aparece só no mensal e no anual */
[data-ciclo-ativo="trienal"] .oferta-aviso { display: none; }
[data-ciclo-ativo="trienal"] .oferta-acoes { margin-bottom: 1.75rem; } /* o respiro que o aviso dava */

/* "Seu restaurante cresce. O Servira acompanha." no pé da coluna: margin-top
   auto empurra a mensagem para baixo; o item anterior garante o respiro mínimo */
.oferta-mensagem {
    display: flex;
    gap: .9rem;
    width: 100%;
    margin-top: auto;
    padding-top: 1.5rem;
    border-top: 1px solid var(--azul-100);
}
.oferta-principal > :nth-last-child(2) { margin-bottom: 1.75rem; }
.oferta-mensagem-icone {
    flex-shrink: 0;
    display: inline-grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: var(--branco);
    border: 1px solid var(--azul-100);
    color: var(--azul-600);
    font-size: .95rem;
}
.oferta-mensagem-titulo { font-size: 1rem; font-weight: 700; color: var(--navy-900); line-height: 1.35; }
.oferta-mensagem-texto { margin-top: .3rem; font-size: .9rem; color: var(--cinza-500); }

/* Lado dos recursos */
.oferta-recursos { padding: clamp(28px, 3.6vw, 48px); }
.recursos-titulo { font-size: 1.15rem; }
.recursos-subtitulo { margin-top: .3rem; font-size: .9rem; color: var(--cinza-500); }

.categorias {
    margin-top: 1.75rem;
    columns: 2;
    column-gap: 2.25rem;
}
.categoria { break-inside: avoid; margin-bottom: 1.6rem; }
.categoria-titulo {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--navy-800);
    margin-bottom: .75rem;
}
.categoria-icone {
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: var(--azul-50);
    border: 1px solid var(--azul-100);
    color: var(--azul-600);
    font-size: .8rem;
}
.categoria-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.categoria-lista li {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    font-size: .925rem;
    color: var(--cinza-600);
    line-height: 1.45;
}
.check {
    flex-shrink: 0;
    display: inline-grid;
    place-items: center;
    width: 18px;
    height: 18px;
    margin-top: .1rem;
    border-radius: 50%;
    background: var(--azul-50);
    color: var(--azul-600);
    font-size: .6rem;
}

/* O botão repetido no fim da lista só aparece no celular e no tablet */
.oferta-cta-rodape { display: none; }

/* --------------------------------------------------------------------------
   11. CONFIANÇA
   -------------------------------------------------------------------------- */
.grade-confianca {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.1rem;
}
.card-confianca {
    display: flex;
    gap: 1.1rem;
    background: var(--branco);
    border: 1px solid var(--cinza-200);
    border-radius: var(--raio);
    padding: 1.5rem;
    height: 100%;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.card-confianca:hover { border-color: var(--azul-300); box-shadow: var(--sombra-sm); }
.card-confianca .icone {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: var(--azul-50);
    color: var(--azul-600);
    font-size: 1.05rem;
    border: 1px solid var(--azul-100);
}
.card-confianca h3 { font-size: 1rem; margin-bottom: .35rem; }
.card-confianca p { font-size: .9rem; color: var(--cinza-500); }

/* --------------------------------------------------------------------------
   12. FAQ
   -------------------------------------------------------------------------- */
.faq-lista { max-width: 820px; margin: 0 auto; }

.faq-lista .accordion-item {
    border: 1px solid var(--cinza-200);
    border-radius: var(--raio) !important;
    margin-bottom: .75rem;
    overflow: hidden;
    background: var(--branco);
}
.faq-lista .accordion-button {
    font-weight: 600;
    font-size: 1rem;
    color: var(--navy-900);
    background: var(--branco);
    padding: 1.15rem 1.35rem;
    box-shadow: none !important;
}
.faq-lista .accordion-button:not(.collapsed) {
    background: var(--azul-50);
    color: var(--azul-700);
}
.faq-lista .accordion-button::after {
    background-image: none;
    content: '\f078';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: .8rem;
    color: var(--azul-600);
    width: auto;
    height: auto;
    transition: transform .2s ease;
}
.faq-lista .accordion-body {
    padding: 0 1.35rem 1.35rem;
    color: var(--cinza-500);
    font-size: .95rem;
}

/* --------------------------------------------------------------------------
   13. CHAMADA FINAL
   -------------------------------------------------------------------------- */
.cta-final {
    position: relative;
    overflow: hidden;
    background: radial-gradient(760px 360px at 20% 0%, #1e3a8a 0%, transparent 62%),
                linear-gradient(140deg, var(--navy-900) 0%, var(--navy-950) 100%);
    color: #fff;
    border-radius: var(--raio-lg);
    padding: clamp(40px, 6vw, 72px) clamp(24px, 5vw, 64px);
    text-align: center;
    box-shadow: var(--sombra-lg);
}
.cta-final h2 { color: #fff; font-size: clamp(1.6rem, 3.4vw, 2.4rem); }
.cta-final p {
    color: #cbd5e1;
    max-width: 560px;
    margin: 1rem auto 2rem;
    font-size: clamp(.98rem, 1.6vw, 1.1rem);
}
.cta-final-acoes { display: flex; flex-wrap: wrap; gap: .85rem; justify-content: center; }
.cta-horario { margin-top: 1.5rem; font-size: .85rem; color: #94a3b8; }

/* --------------------------------------------------------------------------
   14. RODAPÉ
   -------------------------------------------------------------------------- */
.rodape {
    background: var(--navy-900);
    color: #94a3b8;
    padding: clamp(48px, 6vw, 72px) 0 2rem;
    margin-top: clamp(64px, 8vw, 104px);
}
.rodape-grade {
    display: grid;
    grid-template-columns: minmax(260px, 1.6fr) repeat(2, minmax(160px, 1fr));
    gap: 2.5rem;
    padding-bottom: 2.5rem;
    border-bottom: 1px solid var(--navy-800);
}
.rodape .marca { color: #fff; }
.rodape .marca:hover { color: #fff; }
.rodape-descricao { margin-top: 1rem; font-size: .9rem; max-width: 360px; }
.rodape h4 {
    color: #fff;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .09em;
    margin-bottom: 1rem;
}
.rodape ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.rodape ul a { color: #94a3b8; font-size: .9rem; }
.rodape ul a:hover { color: #fff; }
.rodape-contato { display: grid; gap: .6rem; font-size: .9rem; }
.rodape-contato a { color: #94a3b8; }
.rodape-contato a:hover { color: #fff; }
.rodape-base {
    padding-top: 1.75rem;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: space-between;
    align-items: center;
    font-size: .84rem;
}
.rodape-legal { display: flex; flex-wrap: wrap; gap: 1.25rem; }

/* --------------------------------------------------------------------------
   15. ANIMAÇÃO DE ENTRADA
   -------------------------------------------------------------------------- */
.revelar {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .6s cubic-bezier(.2, .7, .3, 1), transform .6s cubic-bezier(.2, .7, .3, 1);
    will-change: opacity, transform;
}
.revelar.visivel { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   16. RESPONSIVO
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .rodape-grade { grid-template-columns: 1fr 1fr; }
    .rodape-grade > :first-child { grid-column: 1 / -1; }

    /* Plano: a oferta em cima e os recursos embaixo, numa coluna */
    .oferta { grid-template-columns: minmax(0, 1fr); max-width: 640px; }
    .oferta-principal {
        border-right: 0;
        border-bottom: 1px solid var(--azul-100);
        border-radius: var(--raio-lg) var(--raio-lg) 0 0;
    }
    .oferta-cta-rodape {
        display: block;
        margin-top: .25rem;
        padding-top: 1.5rem;
        border-top: 1px solid var(--cinza-100);
    }
}

@media (max-width: 767.98px) {
    :root { --topo-altura: 64px; }

    /* O hero logo abaixo já tem "Ver planos e preços" */
    .link-topo { display: none; }

    .hero-acoes .btn-sv, .cta-final-acoes .btn-sv { width: 100%; }
    .selos { gap: .55rem 1.25rem; }
    .rodape-grade { grid-template-columns: 1fr; gap: 2rem; }
    .rodape-base { justify-content: center; text-align: center; }
}

/* Plano no celular: recursos em uma coluna e respiros menores */
@media (max-width: 575.98px) {
    .categorias { columns: 1; }
    .oferta-principal, .oferta-recursos { padding: 28px 22px; }
    .oferta-principal::before { left: 22px; }
}

/* Celular estreito: menos respiro nos botões para os três ciclos caberem */
@media (max-width: 399.98px) {
    .oferta-principal .alternador button { padding-inline: .2rem; }
    .oferta-preco .preco-inteiro { font-size: 3rem; }
}

/* Celular: "Entrar" vira só o ícone (o texto continua para leitores de tela)
   para marca, login e "Fale conosco" caberem numa linha a partir de 360px. */
@media (max-width: 575.98px) {
    .topo-interno { gap: .75rem; }
    .topo-acoes { gap: .5rem; }
    .marca { font-size: 1.1rem; }
    .topo-acoes .btn-sv-sm { padding-inline: .95rem; }
    .topo-acoes .btn-entrar { width: 2.3rem; height: 2.3rem; padding: 0; }
    .btn-entrar-texto {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
}

/* Telas muito estreitas: fica só o símbolo da marca */
@media (max-width: 359.98px) {
    .marca > span:not(.marca-icone) {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
}

/* --------------------------------------------------------------------------
   17. ACESSIBILIDADE E IMPRESSÃO
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .001ms !important;
        transition-duration: .001ms !important;
    }
    .revelar { opacity: 1; transform: none; }
}

@media print {
    .topo, .hero-acoes, .cta-final, .rodape { display: none !important; }
    .hero { background: #fff; color: #000; }
    .hero h1, .hero-sub { color: #000; }
    .oferta { break-inside: avoid; box-shadow: none; }
    .oferta-acoes, .oferta-cta-rodape, .alternador { display: none !important; }
}
/* --------------------------------------------------------------------------
   Instagram no topo, à direita do "Fale conosco"
   Redondo, da mesma altura do botão (btn-sv-sm). Discreto em repouso; no
   hover ganha as cores do Instagram.
   -------------------------------------------------------------------------- */
.btn-instagram {
    display: inline-grid;
    place-items: center;
    flex-shrink: 0;
    width: 2.3rem;
    height: 2.3rem;
    border-radius: 50%;
    border: 1px solid var(--cinza-300);
    background: var(--branco);
    color: var(--navy-800);
    font-size: 1.05rem;
    line-height: 1;
    transition: transform .18s ease, color .18s ease, border-color .18s ease,
                box-shadow .18s ease, background .18s ease;
}
.btn-instagram:hover {
    color: #fff;
    border-color: transparent;
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(214, 36, 159, .3);
}
.btn-instagram:active { transform: translateY(0) scale(.96); }
.topo .marca { flex-shrink: 0; }
/* ==========================================================================
   18. BOTÃO DE TEMA (claro / escuro), à direita do Instagram
   ==========================================================================
   Mesma forma do botão do Instagram (círculo de 2.3rem), para os dois lerem
   como um par. Sem JavaScript o botão não faria nada, então ele só aparece
   quando o script do <head> marcou o <html> com a classe "js".
   -------------------------------------------------------------------------- */
.btn-tema { display: none; }
html.js .btn-tema {
    display: inline-grid;
    place-items: center;
    flex-shrink: 0;
    width: 2.3rem;
    height: 2.3rem;
    padding: 0;
    border-radius: 50%;
    border: 1px solid var(--cinza-300);
    background: var(--branco);
    color: var(--navy-800);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: transform .18s ease, color .18s ease, border-color .18s ease,
                box-shadow .18s ease, background-color .18s ease;
}
/* Sol e lua na mesma célula: trocam por rotação e opacidade, sem piscar */
.btn-tema > i {
    grid-area: 1 / 1;
    transition: opacity .3s cubic-bezier(.2, .7, .3, 1), transform .42s cubic-bezier(.2, .7, .3, 1);
}
.btn-tema .icone-sol { opacity: 1; transform: rotate(0deg) scale(1); }
.btn-tema .icone-lua { opacity: 0; transform: rotate(90deg) scale(.35); }
[data-tema="escuro"] .btn-tema .icone-sol { opacity: 0; transform: rotate(-90deg) scale(.35); }
[data-tema="escuro"] .btn-tema .icone-lua { opacity: 1; transform: rotate(0deg) scale(1); }
html.js .btn-tema:hover {
    transform: translateY(-2px);
    border-color: #f59e0b;
    color: #d97706;
    box-shadow: 0 6px 16px rgba(245, 158, 11, .28);
}
html.js[data-tema="escuro"] .btn-tema:hover {
    border-color: var(--azul-400);
    color: #93c5fd;
    box-shadow: 0 6px 18px rgba(96, 165, 250, .3);
}
html.js .btn-tema:active { transform: translateY(0) scale(.94); }

/* Com o botão de tema, o topo do celular precisa de mais espaço: abaixo de
   420px fica só o símbolo da marca (o nome continua no aria-label do link) e,
   abaixo de 360px, os botões ficam um pouco mais justos. */
@media (max-width: 419.98px) {
    .topo .marca > span:not(.marca-icone) {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
}
@media (max-width: 359.98px) {
    .topo-acoes { gap: .4rem; }
    .topo-acoes .btn-sv-sm { padding-inline: .8rem; }
}

/* ==========================================================================
   19. TEMA ESCURO
   ==========================================================================
   Ativado pelo atributo data-tema="escuro" no <html> (script do <head> +
   botão do topo). Só acrescenta regras: o tema claro continua sendo a base.

   No escuro, --navy-900/800/700 passam a valer cores CLARAS, porque na página
   eles são quase sempre cor de texto. Os poucos lugares em que são FUNDO
   (topo da página, tabela, chamada final, rodapé) são restaurados abaixo.
   -------------------------------------------------------------------------- */
[data-tema="escuro"] {
    color-scheme: dark;

    /* superfícies */
    --branco:    #141d30;   /* fundo dos cards */
    --cinza-50:  #101a2b;   /* faixa alternada das seções */
    --cinza-100: #1f2b40;   /* divisores e fundos suaves */
    --cinza-200: #2a384f;   /* bordas */
    --cinza-300: #3a4a63;   /* bordas de mais contraste */

    /* textos (invertidos para tons claros) */
    --cinza-400: #93a3ba;
    --cinza-500: #aab7ca;
    --cinza-600: #c9d4e3;
    --navy-700:  #dbe4f2;
    --navy-800:  #dfe7f4;
    --navy-900:  #eaf0fb;

    /* azuis e verdes usados como texto ou fundo suave */
    --azul-700: #9bbcff;
    --azul-100: #2b3d61;
    --azul-50:  #17243c;
    --verde-600: #34d399;
    --verde-100: #0e3a2c;

    /* sombras mais densas: sombra suave some no escuro */
    --sombra-xs: 0 1px 2px rgba(0, 0, 0, .5);
    --sombra-sm: 0 2px 10px rgba(0, 0, 0, .45);
    --sombra:    0 12px 34px rgba(0, 0, 0, .5);
    --sombra-lg: 0 26px 64px rgba(0, 0, 0, .6);
    --sombra-azul: 0 16px 40px rgba(37, 99, 235, .42);
}

[data-tema="escuro"] body { background: #0b1220; }
[data-tema="escuro"] .topo { background: rgba(11, 18, 32, .85); }
[data-tema="escuro"] ::selection { background: rgba(59, 130, 246, .38); color: #fff; }

/* Logo: topo e rodapé usam logo-servira-marca-72.png, sem fundo (o S azul direto na página) */

/* Superfícies que continuam escuras nos dois temas (usavam --navy-900 como fundo) */
[data-tema="escuro"] .pular-link { background: #0a111e; }
[data-tema="escuro"] .hero {
    background: radial-gradient(1000px 520px at 15% -10%, #1e3a8a 0%, transparent 60%),
                radial-gradient(900px 480px at 88% 8%, #0c4a6e 0%, transparent 58%),
                linear-gradient(170deg, #0f172a 0%, var(--navy-950) 100%);
}
[data-tema="escuro"] .cta-final {
    background: radial-gradient(760px 360px at 20% 0%, #1e3a8a 0%, transparent 62%),
                linear-gradient(140deg, #0f172a 0%, var(--navy-950) 100%);
    border: 1px solid #26334a;
}
[data-tema="escuro"] .rodape { background: #0a111e; border-top: 1px solid #1a2438; }
[data-tema="escuro"] .rodape-grade { border-bottom-color: #26334a; }

/* Botões com fundo azul continuam com texto branco; o hover usa um azul que
   não foi invertido */
[data-tema="escuro"] .btn-sv-primario,
[data-tema="escuro"] .btn-sv-primario:hover { color: #fff; }
[data-tema="escuro"] .btn-sv-primario:hover { background: var(--azul-500); }

/* Azul como texto ou ícone: clareado para ter contraste sobre fundo escuro */
[data-tema="escuro"] .etiqueta,
[data-tema="escuro"] .card-confianca .icone,
[data-tema="escuro"] .btn-entrar i,
[data-tema="escuro"] .faq-lista .accordion-button::after,
[data-tema="escuro"] .selo-completo i,
[data-tema="escuro"] .oferta-frase i,
[data-tema="escuro"] .oferta-aviso i,
[data-tema="escuro"] .oferta-mensagem-icone,
[data-tema="escuro"] .categoria-icone,
[data-tema="escuro"] .check { color: #9bbcff; }

/* Plano único no escuro: o lado da oferta ganha um azul-marinho suave, e os
   verdes de economia usam o verde claro do tema */
[data-tema="escuro"] .oferta-principal { background: linear-gradient(180deg, #17243c 0%, #141d30 100%); }
[data-tema="escuro"] .selo-completo { border-color: var(--azul-100); }
[data-tema="escuro"] .tag-economia,
[data-tema="escuro"] [data-ciclo-ativo="anual"] .oferta-economia,
[data-tema="escuro"] [data-ciclo-ativo="trienal"] .oferta-economia { color: var(--verde-600); }

/* Utilitários do Bootstrap com cor fixa de tema claro */
[data-tema="escuro"] .text-muted,
[data-tema="escuro"] .text-secondary { color: #aab7ca !important; }

/* ==========================================================================
   20. DEMONSTRAÇÃO: complementos (responsivo, movimento reduzido, impressão e tema escuro)
   ========================================================================== */
.demo-cta h3 { text-wrap: balance; }

/* Contraste mínimo AA (4,5:1) nos textos pequenos da miniatura */
.demo-botao.enviado { background: #047857; }   /* literal: no escuro --verde-700 vira verde claro */
.demo-kds-tempo { color: var(--cinza-600); }
.demo-metrica-valor small { color: var(--cinza-500); }

/* Demonstração em telas médias: menu lateral só com ícones, como o modo
   recolhido do próprio painel do Servira */
@media (max-width: 1199.98px) {
    .demo-app { grid-template-columns: 58px minmax(0, 1fr); }
    .demo-menu { align-items: center; padding-inline: .45rem; }
    .demo-menu-marca { padding-inline: 0; }
    .demo-menu-texto { display: none; }
    .demo-menu-item { justify-content: center; width: 100%; padding-inline: 0; }
}

/* Tablet: métricas em 2 colunas e painéis empilhados */
@media (max-width: 991.98px) {
    .demo-etapa { font-size: .78rem; }
    .demo-metricas-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .demo-paineis { grid-template-columns: minmax(0, 1fr); }
}

/* Celular: sem monitor. Cada etapa vira um cartão e o visitante desliza de um
   para o outro; a linha de progresso acompanha. As bolinhas das etapas têm um
   tamanho máximo para caberem mesmo com o texto do navegador ampliado. */
@media (max-width: 767.98px) {
    .demo-etapas { --circulo: min(2.35rem, 12vw); margin-bottom: 1.25rem; }
    .demo-etapa-icone { font-size: min(1rem, 4.4vw); }
    .demo-etapa-nome { display: none; }
    .demo-janela { border-radius: 0; background: none; box-shadow: none; overflow: visible; }
    .demo-barra,
    .demo-menu { display: none; }
    .demo-app { display: block; background: none; }
    .demo-telas {
        display: flex;
        align-items: flex-start;   /* cada cartão com a sua altura, sem faixas vazias */
        gap: 1rem;
        margin: 0 -20px;
        padding: .25rem 20px 1rem;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: 20px;
        scrollbar-width: none;
    }
    .demo-telas::-webkit-scrollbar { display: none; }
    .demo-tela {
        flex: 0 0 88%;
        opacity: 1;
        visibility: visible;
        transform: none;
        overflow: hidden;
        border-radius: 16px;
        background: #f1f5f9;
        box-shadow: 0 16px 40px rgba(2, 6, 23, .45);
        scroll-snap-align: start;
    }
    .demo-tela-topo { padding: .7rem 1rem; }
    .demo-tela-passo { display: inline; margin-left: auto; color: var(--cinza-500); font-size: .75rem; font-weight: 600; }
    .demo-tela-icones { display: none; }
    .demo-tela-corpo { padding: 1rem; }
    .demo-corpo-duplo { grid-template-columns: minmax(0, 1fr); }
    .demo-kds { grid-template-columns: minmax(0, 1fr); }
    .demo-kds-coluna { min-height: 0; }
    .demo-metrica-valor { font-size: 1.05rem; }
    .demo-rodape { flex-direction: column; align-items: flex-start; gap: .75rem; margin-top: .75rem; }
    .demo-aviso-dados { margin-top: .5rem; }
}

/* Celular estreito: métricas do Financeiro uma embaixo da outra */
@media (max-width: 575.98px) {
    .demo-metricas-2 { grid-template-columns: minmax(0, 1fr); }
}

/* Movimento reduzido: nada pulsa (o resto já fica instantâneo pela regra geral) */
@media (prefers-reduced-motion: reduce) {
    .demo-etapa.ativa .demo-etapa-icone,
    .demo-grafico-ponto.atualizado { animation: none; }
}

@media print {
    .demo-controle, .demo-etapas { display: none !important; }
}

/* Demonstração no tema escuro: a miniatura vira "o sistema em modo escuro"
   (o Servira tem tema escuro), em vez de um bloco claro ofuscante na página */
[data-tema="escuro"] {
    --verde-700: #6ee7b7;   /* texto verde sobre --verde-100, que no escuro é verde fechado */
}
[data-tema="escuro"] .secao-demo {
    background: radial-gradient(900px 480px at 85% 0%, #1e3a8a 0%, transparent 60%),
                radial-gradient(800px 420px at 8% 100%, #0c4a6e 0%, transparent 60%),
                linear-gradient(170deg, #0f172a 0%, var(--navy-950) 100%);
}
[data-tema="escuro"] .demo-etapa-icone,
[data-tema="escuro"] .demo-alerta-final { background: #0a111e; }
[data-tema="escuro"] .demo-alerta-final { border-color: #0a111e; }
[data-tema="escuro"] .demo-etapa.feita .demo-etapa-icone { background: var(--azul-600); }
[data-tema="escuro"] .demo-tela-icone,
[data-tema="escuro"] .demo-alerta-icone,
[data-tema="escuro"] .demo-num.mudando { color: #9bbcff; }
[data-tema="escuro"] .demo-janela        { background: #141d30; }
[data-tema="escuro"] .demo-barra         { background: #1f2b40; border-bottom-color: #26334a; }
[data-tema="escuro"] .demo-endereco      { background: #0f1828; color: var(--cinza-400); }
[data-tema="escuro"] .demo-app           { background: #0f1828; }
[data-tema="escuro"] .demo-tela          { background: #0f1828; }
[data-tema="escuro"] .demo-menu-logo     { background: rgba(255, 255, 255, .12); }
[data-tema="escuro"] .demo-tela-topo     { background: #141d30; border-bottom-color: #26334a; }
[data-tema="escuro"] .demo-cartao,
[data-tema="escuro"] .demo-metrica,
[data-tema="escuro"] .demo-painel,
[data-tema="escuro"] .demo-tabela        { background: #141d30; }
[data-tema="escuro"] .demo-tabela-cabeca { background: #18223a; }
[data-tema="escuro"] .demo-tabela-linha  { border-top-color: #26334a; }
[data-tema="escuro"] .demo-linhas li     { background: #18223a; border-color: #26334a; }
[data-tema="escuro"] .demo-total         { border-top-color: #26334a; }
[data-tema="escuro"] .demo-forma         { background: #18223a; border-color: #26334a; }
[data-tema="escuro"] .demo-alerta        { background: #18223a; border-color: #26334a; }
[data-tema="escuro"] .demo-kds-coluna    { background: #101a2b; }
[data-tema="escuro"] .demo-kds-card      { background: #18223a; }
[data-tema="escuro"] .demo-kds-tempo     { background: #223049; color: var(--cinza-500); }
[data-tema="escuro"] .demo-filtros span  { background: #18223a; border-color: #26334a; }
[data-tema="escuro"] .demo-barra-trilho  { background: #223049; }
[data-tema="escuro"] .demo-grafico-ponto { border-color: #141d30; }
[data-tema="escuro"] .demo-saida         { background: #3b1518; color: #fca5a5; }

/* ==========================================================================
   21. IMPLANTAÇÃO: complementos (responsivo e tema escuro)
   ========================================================================== */
/* Tablet e celular: linha do tempo vertical, com as etapas ligadas de cima a baixo */
@media (max-width: 991.98px) {
    .jornada { grid-template-columns: minmax(0, 1fr); max-width: 560px; }
    .jornada-etapa {
        flex-direction: row;
        align-items: flex-start;
        gap: 1.1rem;
        padding: 0 0 2rem;
        text-align: left;
    }
    .jornada-etapa:last-child { padding-bottom: 0; }
    .jornada-etapa:not(:last-child)::before,
    .jornada-etapa:not(:last-child)::after {
        top: calc(var(--marcador) + 8px);
        bottom: 8px;
        left: calc(var(--marcador) / 2 - 1px);
        right: auto;
        width: 2px;
        height: auto;
    }
    .jornada-etapa:not(:last-child)::after { transform: scaleY(0); transform-origin: center top; }
    .jornada-etapa.conectada::after { transform: scaleY(1); }
    .jornada-conteudo { align-items: flex-start; margin-top: .3rem; }
    .jornada-icone { width: 2.2rem; height: 2.2rem; margin-bottom: .6rem; font-size: .9rem; }
    .implantacao-apoio { grid-template-columns: minmax(0, 1fr); }
}

/* Celular: marcadores menores, bloco escuro mais justo e botões na largura toda */
@media (max-width: 575.98px) {
    .jornada { --marcador: 3rem; }
    .implantacao-apoio { padding: 1.6rem 1.25rem; }
    .implantacao-checklist { padding: 1.15rem 1.1rem; }
    .implantacao-acoes .btn-sv { width: 100%; white-space: normal; text-align: center; }
}

/* Textos longos quebram dentro da etapa, sem empurrar a página para o lado */
.jornada-etapa, .jornada-conteudo { min-width: 0; }
.jornada-conteudo { overflow-wrap: anywhere; }

/* Tema escuro */
[data-tema="escuro"] .secao-implantacao {
    background: linear-gradient(180deg, #101d33 0%, #0b1220 60%);
}
[data-tema="escuro"] .implantacao-apoio {
    background: radial-gradient(640px 320px at 12% 0%, #1e3a8a 0%, transparent 65%),
                linear-gradient(140deg, #0f172a 0%, var(--navy-950) 100%);
    border: 1px solid #26334a;
}
[data-tema="escuro"] .jornada-icone,
[data-tema="escuro"] .jornada-prazo i { color: #9bbcff; }

/* ==========================================================================
   22. TOPO: "VER PLANOS" EM DESTAQUE
   ==========================================================================
   "Ver planos" é o botão azul (ação principal) e "Fale conosco" fica como
   botão secundário, com contorno. No celular, "Fale conosco" vira só o ícone,
   redondo como o do Instagram, para "Ver planos" caber em destaque; o texto
   continua para leitores de tela.
   -------------------------------------------------------------------------- */
.topo-acoes .btn-sv { flex-shrink: 0; }
.btn-ver-planos i { font-size: .8em; }
@media (max-width: 575.98px) {
    .topo-acoes .btn-sv-sm.btn-fale { width: 2.3rem; height: 2.3rem; padding: 0; }
    .btn-fale-texto {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
}
@media (max-width: 359.98px) {
    .topo-acoes .btn-ver-planos i { display: none; }
}

/* ==========================================================================
   23. SERVIRA AI: complementos (responsivo, movimento reduzido e tema escuro)
   ========================================================================== */
/* Selo do painel: acompanha a pergunta escolhida (Disponível / Em breve) */
.ai-painel-topo .ai-pergunta-status { margin-left: auto; }

/* Contraste mínimo AA (4,5:1) nos textos pequenos das interfaces de exemplo */
.ai-tiles span { color: var(--cinza-600); }
.ai-campo { color: var(--cinza-500); }

/* Tablet: interface na largura toda, com as perguntas logo acima */
@media (max-width: 991.98px) {
    .ai-demo { grid-template-columns: minmax(0, 1fr); max-width: 680px; }
    .ai-perguntas { order: -1; }
    .ai-pilares { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 680px; }
    .ai-insights { max-width: 680px; }
    .ai-insights-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ai-recursos { grid-template-columns: minmax(0, 1fr); max-width: 680px; }
}

/* Celular: perguntas numa fileira que desliza com o dedo e insights empilhados */
@media (max-width: 767.98px) {
    .ai-perguntas { padding: 1.1rem 0 1.1rem 1.1rem; }
    .ai-perguntas-titulo { padding-right: 1.1rem; }
    .ai-chips {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding: .15rem 1.1rem .35rem 0;
        scrollbar-width: none;
        overscroll-behavior-x: contain;
    }
    .ai-chips::-webkit-scrollbar { display: none; }
    .ai-chip { flex-shrink: 0; white-space: nowrap; }
    .ai-insights-grade { grid-template-columns: minmax(0, 1fr); }
}

/* Celular estreito: números da resposta em 2 colunas e respiros menores */
@media (max-width: 575.98px) {
    .ai-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ai-tiles div:first-child { grid-column: 1 / -1; }
    .ai-destaque { border-radius: var(--raio); }
    .ai-conversa { padding: 1rem; }
    .ai-campo { margin: 0 1rem 1rem; }
    .ai-pilares { grid-template-columns: minmax(0, 1fr); }
    .ai-recurso { padding: 1.2rem; }
}

/* Movimento reduzido: nada gira nem pisca */
@media (prefers-reduced-motion: reduce) {
    .ai-girando,
    .ai-pergunta-texto.digitando::after { animation: none !important; }
}

/* Tema escuro: as interfaces de exemplo (brancas no claro) escurecem junto */
[data-tema="escuro"] {
    --ambar-800: #fbbf24;
    --ambar-50:  #2b2411;
}
[data-tema="escuro"] .ai-painel,
[data-tema="escuro"] .ai-mini,
[data-tema="escuro"] .ai-pergunta,
[data-tema="escuro"] .ai-resposta { background: #141d30; }
[data-tema="escuro"] .ai-conversa { background: #0f1828; }
[data-tema="escuro"] .ai-lista li { background: #18223a; }
[data-tema="escuro"] .ai-pergunta { border-color: #26334a; }
[data-tema="escuro"] .ai-resposta { border-color: var(--azul-100); box-shadow: none; }
[data-tema="escuro"] .ai-etiqueta-alerta { background: rgba(239, 68, 68, .18); color: #fca5a5; }
[data-tema="escuro"] .ai-girando,
[data-tema="escuro"] .ai-breve-icone,
[data-tema="escuro"] .ai-enquanto-caixa i,
[data-tema="escuro"] .ai-mini-titulo i { color: #9bbcff; }

/* ==========================================================================
   24. RECURSOS POR CATEGORIA
   ==========================================================================
   Três grupos (Operação, Gestão, Inteligência e administração), na ordem da
   rotina do restaurante. Cada grupo tem um rótulo numerado, ícone, título e
   descrição, e o grid de cards de sempre (.card-recurso) logo abaixo. Os
   grupos se separam por espaço e uma linha fina, sem cores diferentes.
   -------------------------------------------------------------------------- */
.recursos-grupos { display: grid; gap: clamp(40px, 5vw, 56px); }
.recursos-grupo + .recursos-grupo {
    padding-top: clamp(40px, 5vw, 56px);
    border-top: 1px solid var(--cinza-200);
}
.recursos-grupo-cabeca {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.6rem;
}
.recursos-grupo-icone {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: var(--azul-50);
    border: 1px solid var(--azul-100);
    color: var(--azul-600);
    font-size: 1.15rem;
}
.recursos-grupo-rotulo {
    display: block;
    margin-bottom: .2rem;
    color: var(--azul-600);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .12em;
}
.recursos-grupo-titulo { font-size: clamp(1.3rem, 2.4vw, 1.6rem); }
.recursos-grupo-texto { margin-top: .35rem; color: var(--cinza-500); font-size: 1rem; max-width: 560px; }

/* Cards: 3 colunas no computador, 2 no tablet, 1 no celular */
.recursos-grupos .grade-recursos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.card-recurso h4 { font-size: 1.075rem; margin-bottom: .45rem; }
@media (max-width: 991.98px) {
    .recursos-grupos .grade-recursos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
    .recursos-grupos .grade-recursos { grid-template-columns: minmax(0, 1fr); }
    .recursos-grupo-icone { width: 42px; height: 42px; border-radius: 12px; font-size: 1rem; }
}

/* Tema escuro: ícone e rótulo do grupo em azul claro */
[data-tema="escuro"] .recursos-grupo-icone,
[data-tema="escuro"] .recursos-grupo-rotulo { color: #9bbcff; }
/* Celular: card compacto, com o ícone ao lado do título e da descrição,
   para os três grupos não virarem uma rolagem longa demais */
@media (max-width: 575.98px) {
    .recursos-grupos .card-recurso {
        display: grid;
        grid-template-columns: 40px minmax(0, 1fr);
        column-gap: .9rem;
        align-items: start;
        padding: 1.1rem 1.15rem;
    }
    .recursos-grupos .icone-recurso {
        grid-row: span 2;
        width: 40px;
        height: 40px;
        margin-bottom: 0;
        border-radius: 11px;
        font-size: 1rem;
    }
    .recursos-grupos .card-recurso h4 { margin-bottom: .25rem; font-size: 1rem; }
    .recursos-grupos .grade-recursos { gap: .75rem; }
}

/* ==========================================================================
   25. AVALIAÇÃO NO GOOGLE
   ==========================================================================
   Faixa branca entre o plano e a confiança: um card com o convite e o botão
   "Avaliar no Google" de um lado e o QR code do outro. Sem nota ou estrelas:
   a página não mostra avaliação que não foi conferida.
   -------------------------------------------------------------------------- */
.secao-avaliacao { padding-block: clamp(44px, 5.5vw, 72px); }

.avaliacao {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(20px, 3.5vw, 48px);
    max-width: 1040px;
    margin-inline: auto;
    padding: clamp(24px, 3.6vw, 40px) clamp(24px, 4vw, 48px);
    border: 1px solid var(--azul-100);
    border-radius: var(--raio-lg);
    background: linear-gradient(135deg, var(--azul-50) 0%, var(--branco) 65%);
    box-shadow: var(--sombra-sm);
}

.avaliacao .etiqueta { display: inline-flex; align-items: center; gap: .45rem; }
.avaliacao-titulo { font-size: clamp(1.4rem, 2.8vw, 1.95rem); text-wrap: balance; }
.avaliacao-texto { margin-top: .6rem; color: var(--cinza-600); font-size: 1rem; max-width: 56ch; }
.avaliacao-cta { margin-top: 1.4rem; }

/* QR code: fundo branco nos dois temas (a câmera precisa de módulo escuro
   sobre fundo claro). 8px de borda + 132px de código = 4px por módulo. */
.avaliacao-qr {
    flex-shrink: 0;
    display: grid;
    justify-items: center;
    gap: .6rem;
    margin: 0;
}
.avaliacao-qr img {
    width: 148px;
    height: 148px;
    padding: 8px;
    background: #fff;
    border: 1px solid var(--cinza-200);
    border-radius: var(--raio);
    box-shadow: var(--sombra-xs);
}
.avaliacao-qr figcaption {
    max-width: 160px;
    font-size: .8125rem;
    font-weight: 500;
    line-height: 1.4;
    text-align: center;
    color: var(--cinza-600);
}
[data-tema="escuro"] .avaliacao-qr img { border-color: #26334a; }

/* Celular: o QR some (não dá para ler a própria tela) e o botão ocupa a
   largura do card */
@media (max-width: 575.98px) {
    .avaliacao { padding: 24px 18px; }
    .avaliacao-qr { display: none; }
    .avaliacao-cta { width: 100%; }
}