/* =====================================================================
   LIQUID GLASS: acabamento especial só na landing page pública
   (index.php), escopado pela classe body.pagina-landing. Nunca
   sobrescreve .site-header/.comanda/.plano-card/.showcase-panel direto
   em site.css, porque esses nomes de classe são reaproveitados no
   admin/PDV (ver comentário "APP INTERNO" em site.css), por isso aqui
   tudo vem prefixado por "body.pagina-landing " pra não vazar pra lá.
   Mantém o fundo "papel" e a identidade de comanda/carimbo da marca;
   o vidro é um acabamento por cima em pontos-chave, não uma troca de
   marca. Arquivo separado (em vez de ir dentro de site.css) só pra não
   inchar o CSS compartilhado com admin/PDV com algo que eles não usam.
   ===================================================================== */

body.pagina-landing { position: relative; overflow-x: hidden; }

/* Manchas de cor desfocadas atrás dos painéis de vidro. Sem uma camada
   com cor/contraste atrás, backdrop-filter:blur() não tem o que
   refratar e o efeito simplesmente não aparece visualmente. */
.glass-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    pointer-events: none;
    z-index: 0;
    opacity: .5;
    transition: transform 2.4s ease-in-out;
}
.glass-blob-stamp { background: radial-gradient(circle, var(--stamp) 0%, transparent 72%); }
.glass-blob-sage  { background: radial-gradient(circle, var(--sage) 0%, transparent 72%); }

.hero { position: relative; isolation: isolate; }
.hero .glass-blob-1 { width: 480px; height: 480px; top: -190px; right: -120px; }
.hero .glass-blob-2 { width: 360px; height: 360px; bottom: -170px; left: -150px; opacity: .28; }
.hero .container { position: relative; z-index: 1; }

#recursos { position: relative; isolation: isolate; }
#recursos .glass-blob-1 { width: 400px; height: 400px; top: 40px; right: -150px; opacity: .25; }
#recursos .container { position: relative; z-index: 1; }

#planos { position: relative; isolation: isolate; }
#planos .glass-blob-1 { width: 440px; height: 440px; top: 10px; left: -170px; }
#planos .glass-blob-2 { width: 400px; height: 400px; bottom: -130px; right: -150px; opacity: .32; }
#planos .glass-blob-3 { width: 260px; height: 260px; top: -60px; left: 38%; opacity: .22; }
#planos .container { position: relative; z-index: 1; }

@media (prefers-reduced-motion: no-preference) {
    .hero:hover .glass-blob-1 { transform: translate(10px, 8px); }
    #planos:hover .glass-blob-2 { transform: translate(-10px, -8px); }
}

/* ---------------- Header: vidro fixo no topo ---------------- */
body.pagina-landing .site-header {
    background: rgba(243, 239, 228, 0.55);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    border-bottom: 1px solid rgba(255,255,255,0.45);
    box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 8px 24px -16px rgba(32,29,24,.25);
}

/* ---------------- Comanda do hero ---------------- */
body.pagina-landing .comanda {
    background: rgba(255,255,255,0.55);
    backdrop-filter: blur(22px) saturate(180%);
    -webkit-backdrop-filter: blur(22px) saturate(180%);
    border: 1px solid rgba(255,255,255,0.6);
    border-radius: 20px;
    box-shadow:
        0 30px 60px -20px rgba(32,29,24,.35),
        0 1px 0 rgba(255,255,255,.8) inset,
        0 -1px 0 rgba(32,29,24,.05) inset;
    transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease;
}
body.pagina-landing .comanda-wrap:hover .comanda {
    transform: rotate(1deg) translateY(-6px);
    box-shadow:
        0 40px 70px -18px rgba(32,29,24,.4),
        0 1px 0 rgba(255,255,255,.9) inset,
        0 -1px 0 rgba(32,29,24,.05) inset;
}
body.pagina-landing .comanda::before {
    content: '';
    position: absolute;
    top: 0; left: 14%; right: 14%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.9), transparent);
}

/* ---------------- Cards de recursos (vitrine com abas) ---------------- */
body.pagina-landing .showcase-panel {
    background: rgba(255,255,255,0.45);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    border: 1px solid rgba(255,255,255,0.55);
    border-radius: 20px;
    box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 20px 50px -24px rgba(32,29,24,.25);
    transition: box-shadow .35s ease;
}
body.pagina-landing .showcase-panel:hover {
    box-shadow: 0 1px 0 rgba(255,255,255,.8) inset, 0 28px 60px -24px rgba(32,29,24,.32);
}
body.pagina-landing .showcase-art {
    background: rgba(255,255,255,0.3);
    border: 1px solid rgba(255,255,255,0.5);
}

/* ---------------- Cards de plano ---------------- */
/* .plano-card fica um invólucro "nu" (só posição/transform pro hover-lift
   e pro selo "Mais escolhido" poder vazar pra fora) - quem leva o vidro,
   o recorte arredondado e o brilho é a camada .plano-card-vidro por
   dentro. Precisava separar porque overflow:hidden (pro brilho não
   vazar pra fora do card) cortaria o selo, que fica de propósito meio
   fora da borda superior. */
body.pagina-landing .plano-card {
    background: none;
    border: none;
    padding: 0;
    transition: transform .35s cubic-bezier(.2,.8,.2,1);
}
body.pagina-landing .plano-card:hover { transform: translateY(-6px); }
body.pagina-landing .plano-card.destaque:hover { transform: translateY(-14px); }

/* O selo "Mais escolhido" vem ANTES de .plano-card-vidro no HTML, mas
   os dois são position:relative/absolute sem z-index - nesse empate,
   quem pinta por último (o vidro) fica por cima e cobre o selo. z-index
   explícito aqui garante que o selo sempre fique acima do vidro. */
body.pagina-landing .plano-badge { z-index: 2; }

body.pagina-landing .plano-card-vidro {
    position: relative;
    z-index: 1;
    height: 100%;
    padding: 32px 28px;
    overflow: hidden;
    background: rgba(255,255,255,0.5);
    backdrop-filter: blur(20px) saturate(170%);
    -webkit-backdrop-filter: blur(20px) saturate(170%);
    border: 1px solid rgba(255,255,255,0.6);
    border-radius: 22px;
    box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 24px 50px -24px rgba(32,29,24,.25);
    transition: box-shadow .35s ease;
}
body.pagina-landing .plano-card:hover .plano-card-vidro {
    box-shadow: 0 1px 0 rgba(255,255,255,.85) inset, 0 32px 60px -22px rgba(32,29,24,.32);
}
body.pagina-landing .plano-card.destaque .plano-card-vidro {
    border: 1.5px solid var(--stamp);
    box-shadow:
        0 1px 0 rgba(255,255,255,.7) inset,
        0 0 0 4px rgba(193,67,42,.12),
        0 30px 60px -20px rgba(193,67,42,.35);
}
body.pagina-landing .plano-card.destaque:hover .plano-card-vidro {
    box-shadow:
        0 1px 0 rgba(255,255,255,.85) inset,
        0 0 0 4px rgba(193,67,42,.16),
        0 38px 70px -18px rgba(193,67,42,.42);
}
body.pagina-landing .plano-card-vidro::before {
    content: '';
    position: absolute;
    top: 0; left: 10%; right: 10%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.95), transparent);
}
/* Brilho diagonal que "escorre" pela camada de vidro no hover - o toque
   de vidro líquido de verdade, não só transparência estática. Faixa
   larga e suave (não é glare de tela), atravessa da esquina superior
   esquerda até sair pela direita quando o mouse passa por cima do card.
   Fica dentro de .plano-card-vidro (que tem overflow:hidden) pra nunca
   vazar pro resto da página. */
body.pagina-landing .plano-card-vidro::after {
    content: '';
    position: absolute;
    top: -60%; left: -60%;
    width: 60%; height: 220%;
    background: linear-gradient(115deg, transparent 0%, rgba(255,255,255,.55) 45%, transparent 90%);
    transform: translateX(-120%) rotate(8deg);
    transition: transform .85s cubic-bezier(.2,.8,.2,1);
    pointer-events: none;
}
body.pagina-landing .plano-card:hover .plano-card-vidro::after {
    transform: translateX(260%) rotate(8deg);
}
@media (prefers-reduced-motion: reduce) {
    body.pagina-landing .plano-card-vidro::after { display: none; }
}

/* ---------------- Módulos inclusos no plano (check = vem no pacote,
   cadeado = dá pra contratar separado como upgrade) ---------------- */
.plano-modulos-label {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--ink-soft);
    margin: 20px 0 10px;
}
.plano-modulos-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin-bottom: 24px;
}
.plano-modulo-chip {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    font-weight: 600;
    padding: 7px 9px;
    border-radius: 10px;
    background: rgba(75, 107, 79, .12);
    border: 1px solid rgba(75, 107, 79, .22);
    color: var(--ink);
    line-height: 1.25;
    transition: background .15s ease, border-color .15s ease;
}
.plano-modulo-chip i { font-size: 13px; color: var(--sage); flex-shrink: 0; }
.plano-modulo-chip:hover { background: rgba(75, 107, 79, .2); }
.plano-modulo-chip.bloqueado {
    color: var(--ink-soft);
    background: rgba(255,255,255,.18);
    border: 1px dashed rgba(92, 86, 74, .25);
}
.plano-modulo-chip.bloqueado:hover { background: rgba(255,255,255,.3); }
.plano-modulo-chip.bloqueado i { color: var(--ink-soft); }

@media (max-width: 480px) {
    .plano-modulos-grid { grid-template-columns: 1fr; }
}

/* Navegador sem suporte a backdrop-filter: cai num branco quase opaco
   normal, continua legível, só perde o efeito de vidro. */
@supports not (backdrop-filter: blur(1px)) {
    body.pagina-landing .site-header,
    body.pagina-landing .comanda,
    body.pagina-landing .showcase-panel,
    body.pagina-landing .plano-card {
        background: rgba(255,255,255,0.92);
    }
}