@property --border-angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

:root {
    --primary-color: #00BA00; /* Verde Claro (SVG) */
    --primary-hover: #0B750B; /* Verde Escuro (SVG) */
    --secondary-color: #0B750B; /* Verde Escuro como secundária */
    --bg-dark: #0a0a0a;
    --bg-card: #161616;
    --text-main: #ffffff;
    --text-muted: #a0a0a0;
    --border-color: #333;
    --gradient-main: linear-gradient(135deg, #00BA00 0%, #0B750B 100%);
    --font-main: 'Inter', sans-serif;
    --nav-height: 80px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    /* Lenis handles smooth scroll */
    scrollbar-width: thin; /* Firefox */
    scrollbar-color: var(--primary-color) var(--bg-dark); /* Firefox */
}

/* Mobile Break Utility */
.mobile-break {
    display: none;
}

@media (max-width: 768px) {
    .mobile-break {
        display: block;
    }
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: var(--bg-dark);
}

::-webkit-scrollbar-thumb {
    background: var(--primary-color);
    border-radius: 5px;
    border: 2px solid var(--bg-dark);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--primary-hover);
}

body {
    font-family: var(--font-main);
    background-color: var(--bg-dark);
    color: var(--text-main);
    line-height: 1.6;
    overflow-x: hidden;
}

/* Layout Utilities */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.section {
    padding: 100px 0;
}

.section-header {
    text-align: center;
    margin-bottom: 60px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.section-header h2 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 15px;
}

.section-header p {
    color: var(--text-muted);
    font-size: 1.1rem;
}

.title-separator {
    width: 100%;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.2);
    margin-top: 30px;
}

.system-requirements-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 12px 28px;
    border-radius: 50px;
    color: var(--text-muted);
    font-size: 1rem;
    margin-top: 30px;
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.system-requirements-badge:hover {
    transform: translateY(-2px);
    border-color: #0078d7;
    background: rgba(0, 120, 215, 0.1);
}

.system-requirements-badge i {
    font-size: 1.4rem;
    color: #0078d7; /* Windows Blue */
}

.system-requirements-badge strong {
    color: #fff;
    font-weight: 600;
}

.text-gradient {
    background: var(--gradient-main);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Buttons */
.btn {
    display: inline-block;
    padding: 12px 24px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    cursor: pointer;
    border: none;
    font-size: 1rem;
}

.btn-primary {
    background: var(--primary-color);
    color: #000;
    box-shadow: 0 4px 15px rgba(0, 186, 0, 0.3);
}

.btn-primary:hover {
    background: var(--primary-hover);
    transform: translateY(-2px);
    box-shadow: 0 2px 8px var(--primary-color); /* Sombra Reduzida em 60% */
    color: #ffffff;
}

.btn-outline {
    background: transparent;
    border: 2px solid var(--border-color);
    color: var(--text-main);
}

.btn-outline:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.btn-lg {
    padding: 16px 32px;
    font-size: 1.1rem;
}

.btn-sm {
    padding: 8px 20px;
    font-size: 0.9rem;
}

.btn-block {
    display: block;
    width: 100%;
    text-align: center;
}

/* Custom Shine Button */
.btn-shine {
    width: 100%;
    max-width: 600px; /* Aligns with hero paragraph max-width */
    box-shadow: none; /* Remove shadow in normal state */
    padding: 16px 32px; /* Altura igualada ao btn-lg */
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    background-color: #004d25; /* Verde escuro no normal */
    color: #ffffff; /* Fonte branca no normal */
    border: 1px solid #ffffff; /* Borda branca no normal */
}

.btn-shine:hover {
    background-color: var(--primary-color); /* Verde claro no hover */
    color: #ffffff; /* Fonte branca no hover */
    box-shadow: 0 0 20px rgba(0, 230, 118, 0.4);
}

/* =========================================
   Shape Dividers (Divisores de Seção)
   ========================================= */
.shape-divider {
    position: absolute;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    z-index: 1;
}

.shape-divider svg {
    display: block;
    width: calc(100% + 1.3px);
    height: 60px; /* Altura padrão, ajustável */
    transform: rotateY(180deg);
}

.shape-divider .shape-fill {
    fill: var(--bg-dark);
}

/* Variações de Posição */
.divider-bottom {
    bottom: 0;
}

.divider-top {
    top: 0;
    transform: rotate(180deg);
}

/* Variações de Cor (para conectar com seções de cores diferentes) */
.fill-dark { fill: var(--bg-dark); }
.fill-card { fill: var(--bg-card); }
.fill-primary-low { fill: rgba(0, 186, 0, 0.05); }

/* Alturas específicas para efeitos diferentes */
.wave-lg svg { height: 120px; }
.wave-md svg { height: 80px; }
.wave-sm svg { height: 40px; }

/* =========================================
   Scroll Animations (Entrada Sequencial)
   ========================================= */
/* Estado Inicial (Oculto) */
.scroll-hidden {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: opacity, transform;
}

/* Estado Visível (Animado) */
.scroll-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Delays Sequenciais (Stagger) 
   Útil para grids de cards onde cada um entra um pouco depois do outro 
*/
.delay-100 { transition-delay: 100ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }
.delay-400 { transition-delay: 400ms; }
.delay-500 { transition-delay: 500ms; }
.delay-600 { transition-delay: 600ms; }

/* Tipos de Animação Extras */
.fade-in-left {
    transform: translateX(-50px);
}
.fade-in-right {
    transform: translateX(50px);
}
.scale-up {
    transform: scale(0.9);
}

.scroll-visible.fade-in-left,
.scroll-visible.fade-in-right {
    transform: translateX(0);
}
.scroll-visible.scale-up {
    transform: scale(1);
}

/* Ajustes de Seção para Divisores */
.section {
    position: relative; /* Necessário para posicionamento absoluto dos divisores */
}



.btn-shine::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        to right,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.5) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    transform: skewX(-25deg);
    animation: shine 6.5s infinite; /* Movimento 6s + Pausa 0.5s */
    pointer-events: none;
}

@keyframes shine {
    0% {
        left: -100%;
    }
    92% { /* Movimento leva 6s (6/6.5 ≈ 92%) */
        left: 200%;
    }
    100% { /* Pausa de 0.5s no final */
        left: 200%;
    }
}

/* Navbar */
.navbar {
    height: var(--nav-height);
    background: rgba(10, 10, 10, 0.9);
    backdrop-filter: blur(10px);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
}

.logo {
    display: flex;
    align-items: center;
    max-width: 200px; /* Limite de segurança */
}

.logo img {
    height: 40px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

.nav-links {
    display: flex;
    gap: 30px;
    list-style: none;
}

.nav-links a {
    color: var(--text-muted);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s;
}

.nav-links a:hover {
    color: var(--primary-color);
}

.menu-toggle {
        display: none;
        /* Removido font-size pois agora usamos spans */
    }

/* Hero Section */
.hero {
    position: relative;
    padding: 140px 0 100px;
    overflow: hidden; /* Adicionado para evitar overflow lateral */
}

/* Efeito de fundo glow */
.hero::before {
    content: '';
    position: absolute;
    top: -50%;
    left: 50%;
    transform: translateX(-50%);
    width: 800px;
    height: 800px;
    background: radial-gradient(circle, rgba(0, 230, 118, 0.25) 0%, rgba(0,0,0,0) 70%); /* Opacidade aumentada */
    z-index: -1;
    pointer-events: none;
    will-change: transform, opacity;
    animation: glow-move 4s infinite ease-in-out alternate; /* Mais rápido */
}

@keyframes glow-move {
    0% {
        transform: translate(-50%, 0) scale(1);
        opacity: 0.8;
    }
    100% {
        transform: translate(-50%, 40px) scale(1.15); /* Movimento mais visível */
        opacity: 1;
    }
}

.hero-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.badge {
    background: #ffffff;
    color: #007500; /* Verde mais escuro para leitura no branco */
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 600;
    display: inline-block;
    margin-bottom: 20px;
    border: 1px solid #00E676; /* Verde claro luminoso */
    box-shadow: 0 0 12px rgba(0, 230, 118, 0.5); /* Glow luminoso */
}

.hero-text h1 {
    font-size: 3.5rem;
    line-height: 1.2;
    margin-bottom: 20px;
    font-weight: 800;
}

.highlight {
    color: var(--primary-color);
}

.hero-text p {
    font-size: 1.15rem;
    color: var(--text-muted);
    margin-bottom: 40px;
    max-width: 600px;
}

.hero-buttons {
    display: flex;
    gap: 20px;
    margin-bottom: 50px;
}

/* Hero Stats Cards */
.hero-stats-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.stat-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.stat-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3), 0 0 15px rgba(0, 230, 118, 0.3);
    border-color: #00E676;
}

.stat-icon {
    width: 50px;
    height: 50px;
    background: rgba(0, 186, 0, 0.1);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: var(--primary-color);
    overflow: hidden; /* Para garantir que o lottie não vaze se for maior */
}

.stat-icon.lottie-icon {
    width: 60px;
    height: 60px;
    background: transparent; /* Remove o fundo verde padrão para lotties se preferir, ou mantenha */
    padding: 0;
}

.stat-info {
    display: flex;
    flex-direction: column;
}

.stat-number {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text-main);
    line-height: 1.2;
}

.stat-label {
    font-size: 0.85rem;
    color: var(--text-muted);
}

@media (max-width: 992px) {
    .hero-stats-cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .hero-stats-cards {
        grid-template-columns: 1fr;
    }
}

/* Mockup CSS */
.mockup-container {
    position: relative;
    perspective: 1000px;
}

.glow-effect {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120%;
    height: 120%;
    background: radial-gradient(circle, rgba(0, 186, 0, 0.2) 0%, rgba(0,0,0,0) 70%);
    z-index: -1;
}

.software-mockup {
    /* Removed background/border to let PNG shape define the look */
    background: transparent;
    box-shadow: none; /* Shadow handled by image or container if needed */
    transform: rotateY(-10deg) rotateX(5deg) translateZ(0);
    transition: transform 0.5s ease;
    display: flex;
    flex-direction: column;
    backface-visibility: hidden;
    -webkit-font-smoothing: subpixel-antialiased;
    will-change: transform;
}

.software-mockup:hover {
    transform: rotateY(0) rotateX(0);
}

/* Removed .mockup-header styles as element is deleted */

.mockup-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: visible; /* Changed to visible for PNG transparency/shadows */
    background: transparent;
}

.mockup-img {
    width: 100%;
    height: auto; /* Mantém a proporção original da imagem */
    display: block;
    image-rendering: -webkit-optimize-contrast; /* Tenta forçar nitidez */
}

/* About Section */
.about {
    background-color: #0f0f0f;
    position: relative;
    z-index: 2;
    padding-top: 120px; /* Ajuste para o divisor */
}

/* Curve Divider Top (Hero to About) */
.curve-divider-top {
    position: absolute;
    top: -2px; /* Subindo levemente para cobrir qualquer fresta cinza */
    left: 0;
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    z-index: 100;
    overflow: visible;
}

.curve-divider-top::before,
.curve-divider-top::after {
    content: '';
    flex: 1;
    height: 2px;
    background-color: #00FF00; /* Verde Luminoso */
    box-shadow: 0 0 5px #00FF00; /* Efeito Neon */
}

.curve-divider-top svg {
    width: 150px; /* Mais largo para suavizar */
    height: 60px; /* Mais alto para a curva descer mais */
    flex-shrink: 0;
    overflow: visible;
    display: block;
}

.curve-divider-top .shape-fill {
    fill: #0a0a0a; /* Forçando explicitamente a cor exata da Hero (var(--bg-dark)) */
}

.curve-divider-top .shape-stroke {
    fill: none;
    stroke: #00FF00; /* Verde Luminoso */
    stroke-width: 2px;
    filter: drop-shadow(0 0 5px #00FF00); /* Efeito Neon */
}

.curve-arrow {
    position: absolute;
    top: -12px; /* Centralizado na linha */
    left: 50%;
    transform: translateX(-50%);
    color: #00FF00; /* Verde Luminoso */
    font-size: 1.3rem;
    animation: bounce-arrow 2s infinite; /* Animação de volta */
    cursor: default;
    z-index: 6;
    text-shadow: 0 0 5px #00FF00;
}

@keyframes bounce-arrow {
    0%, 20%, 50%, 80%, 100% {
        transform: translateX(-50%) translateY(0);
    }
    40% {
        transform: translateX(-50%) translateY(5px);
    }
    60% {
        transform: translateX(-50%) translateY(3px);
    }
}

.screenshot-section {
    padding-top: 20px; /* Reduzido para parecer continuação da seção anterior */
    background-color: #0f0f0f; /* Mesma cor da seção .about */
}

.screenshot-container {
    width: 100%;
    max-width: 100%;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: #1a1a1a; /* Fundo para o header */
}

/* Mockup Header (Reintroduzido) */
.mockup-header {
    background: #252525;
    padding: 12px;
    display: flex;
    gap: 8px;
    border-bottom: 1px solid #333;
}

.dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.dot.red { background: #ff5f56; }
.dot.yellow { background: #ffbd2e; }
.dot.green { background: #27c93f; }

.app-screenshot {
    width: 100%;
    height: auto;
    display: block;
}

/* Features */
.features {
    position: relative;
    overflow: hidden;
    z-index: 1; /* Garante que features fique abaixo de how-it-works (z-index: 2) */
}

.features::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(-50%, -50%);
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(0, 230, 118, 0.15) 0%, rgba(0,0,0,0) 70%);
    z-index: -1;
    pointer-events: none;
    will-change: transform, opacity;
    animation: glow-pulse-left 5s infinite ease-in-out alternate;
}

@keyframes glow-pulse-left {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.6;
    }
    100% {
        transform: translate(-50%, -50%) scale(1.2);
        opacity: 0.9;
    }
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.feature-card {
    background: transparent;
    padding: 30px;
    border-radius: 16px;
    position: relative;
    /* border: 1px solid rgba(255, 255, 255, 0.05);  Removido para usar pseudo-elemento */
    transition: transform 0.3s ease;
    text-align: center;
    isolation: isolate; /* Cria novo contexto de empilhamento */
}

/* Background do card */
.feature-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--bg-card);
    border-radius: inherit;
    z-index: -1;
    border: 1px solid rgba(255, 255, 255, 0.05); /* Borda padrão */
}

/* Borda animada (Glow) */
.feature-card::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 18px; /* 16px + 2px */
    background: conic-gradient(
        from var(--border-angle),
        transparent 20%,
        var(--primary-color),
        transparent 80%
    );
    z-index: -2;
    opacity: 0;
    transition: opacity 0.3s ease;
    animation: rotate-border 3s linear infinite;
}

.feature-card:hover {
    transform: translateY(-15px);
    box-shadow: 0 15px 40px rgba(0, 186, 0, 0.2); /* Sombra verde difusa */
}

.feature-card:hover::before {
    opacity: 1;
}

/* Remover borda e sombra antigas no hover */
/*
.feature-card:hover {
    border-color: rgba(0, 230, 118, 0.3);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}
*/

@keyframes rotate-border {
    to {
        --border-angle: 360deg;
    }
}

.icon-box {
    width: 60px; /* Aumentado para 60px */
    height: 60px; /* Aumentado para 60px */
    background: transparent; /* Fundo removido */
    /* border-radius: 12px; removido pois não tem mais fundo */
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px; /* Centraliza horizontalmente com auto */
}

.icon-box i {
    font-size: 1.5rem;
    color: var(--primary-color);
}

.feature-card h3 {
    font-size: 1.3rem;
    margin-bottom: 10px;
    color: var(--primary-color);
}

.feature-card p {
    color: var(--text-muted);
    font-size: 0.95rem;
}

/* How it Works */
.how-it-works {
    background: #0f0f0f;
    counter-reset: step;
    padding-top: 120px; /* Ajuste para o divisor */
    /* overflow-x: hidden; Removido para permitir que o divisor apareça acima (top: -2px) */
    position: relative;
    z-index: 2;
}

.steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    margin-top: 50px;
}

.step {
    text-align: center;
    position: relative;
}

/* Linha conectora - Trilha */
.steps .step:not(:last-child)::before {
    content: '';
    position: absolute;
    top: 30px;
    left: 50%;
    width: calc(100% + 30px); /* Cobre o espaço + o gap */
    height: 2px;
    background: rgba(255, 255, 255, 0.1);
    z-index: 1; /* Acima do background padrão */
}

/* Linha conectora - Progresso */
.steps .step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 30px;
    left: 50%;
    width: 0;
    height: 2px;
    background: var(--primary-color);
    box-shadow: 0 0 10px rgba(0, 186, 0, 0.5); /* Glow na linha */
    z-index: 2; /* Acima da linha cinza */
    transition: width 0.6s ease-out;
}

/* Estado ativo da linha - Aumentada especificidade para garantir override */
.steps .step.line-active::after {
    width: calc(100% + 30px); /* Preenche até o próximo círculo */
}

/* Estado ativo do número */
.step.active .step-number {
    background: var(--primary-color);
    color: #fff;
    box-shadow: 0 0 20px rgba(0, 186, 0, 0.6);
    transform: scale(1.1);
    border-color: var(--primary-color);
}

.step-number {
    width: 60px;
    height: 60px;
    background: var(--bg-card);
    border: 2px solid rgba(0, 186, 0, 0.3); /* Borda mais sutil inicialmente */
    color: var(--text-muted); /* Cor mais apagada inicialmente */
    font-size: 1.5rem;
    font-weight: 700;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    position: relative;
    z-index: 10; /* Acima das linhas */
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Efeito elástico */
}

.step h3 {
    margin-bottom: 10px;
}

.step p {
    color: var(--text-muted);
    font-size: 0.9rem;
}

/* Testimonials */
.testimonials {
    background: #0f0f0f; /* Mesma cor da seção How It Works */
    padding-top: 50px; /* Ajuste visual se necessário */
}

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

.testimonial-card {
    background: var(--bg-card);
    border: 2px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    padding: 30px;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.testimonial-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3), 0 0 15px rgba(0, 230, 118, 0.3);
    border-color: #00E676;
}

.testimonial-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

.client-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    color: var(--text-muted);
    overflow: hidden; /* Garante que a imagem respeite o border-radius */
}

.client-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.client-info {
    flex: 1; /* Ocupa o espaço restante */
}

.client-info h4 {
    font-size: 1.1rem;
    margin-bottom: 2px;
    color: var(--text-main);
}

.client-info span {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.client-rating {
    margin-top: 5px; /* Espaço acima das estrelas */
    color: #ffbd2e; /* Cor dourada/amarela para estrelas */
    font-size: 0.9rem;
}

.testimonial-body p {
    color: var(--text-muted);
    font-style: italic;
    font-size: 0.95rem;
    line-height: 1.6;
}

/* Pricing */
.pricing {
    position: relative;
    overflow: hidden;
}

.pricing::before {
    content: '';
    position: absolute;
    top: 50%;
    right: 0;
    transform: translate(50%, -50%);
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(0, 230, 118, 0.15) 0%, rgba(0,0,0,0) 70%);
    z-index: -1;
    pointer-events: none;
    will-change: transform, opacity;
    animation: glow-pulse-right 5s infinite ease-in-out alternate;
}

@keyframes glow-pulse-right {
    0% {
        transform: translate(50%, -50%) scale(1);
        opacity: 0.6;
    }
    100% {
        transform: translate(50%, -50%) scale(1.2);
        opacity: 0.9;
    }
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    align-items: center; /* Alinha verticalmente para destacar o do meio se for maior */
}

.pricing-card {
    background: var(--bg-card);
    border-radius: 20px;
    border: 2px solid rgba(255, 255, 255, 0.05);
    padding: 40px;
    width: 100%;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.pricing-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3), 0 0 15px rgba(0, 230, 118, 0.3);
    border-color: #00E676;
}

.pricing-card.featured {
    border: 2px solid var(--primary-color);
    box-shadow: 0 0 30px rgba(0, 230, 118, 0.1);
    transform: scale(1.05); /* Leve destaque de tamanho */
    z-index: 1;
}

.pricing-card.featured:hover {
    transform: scale(1.05) translateY(-10px);
    box-shadow: 0 15px 40px rgba(0, 186, 0, 0.3), 0 0 20px rgba(0, 230, 118, 0.4);
    border-color: #00E676;
}

.pricing-card.featured::before {
    content: var(--etiqueta, 'MELHOR ESCOLHA');
    position: absolute;
    top: 30px;
    right: -60px;
    width: 220px; /* Largura fixa para permitir centralização */
    background: var(--primary-color);
    color: #000;
    font-weight: 700;
    font-size: 0.75rem;
    padding: 8px 0; /* Padding apenas vertical */
    text-align: center; /* Centraliza o texto no bloco */
    transform: rotate(45deg);
    z-index: 2;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.pricing-header {
    text-align: center;
    margin-bottom: 30px;
    padding-bottom: 30px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.price {
    font-size: 2.4rem;
    font-weight: 800;
    color: var(--text-main);
    margin: 10px 0;
    line-height: 1.2; /* Ajuste para evitar espaçamento excessivo com o bloco abaixo */
}

.period {
    font-size: 1rem;
    color: var(--text-muted);
    font-weight: 400;
    display: block; /* Força a quebra de linha */
}

/* Back to Top Button */
#back-to-top {
    position: fixed;
    bottom: 30px;
    left: 30px; /* Canto inferior esquerdo */
    width: 50px;
    height: 50px;
    background: var(--bg-card);
    border: 2px solid rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    color: var(--primary-color);
    font-size: 1.2rem;
    cursor: pointer;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-100px); /* Começa fora da tela à esquerda */
    transition: all 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55); /* Efeito elástico suave */
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

#back-to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateX(0); /* Entra vindo da esquerda */
}

#back-to-top:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3), 0 0 15px rgba(0, 230, 118, 0.5); /* Glow verde */
    border-color: #00E676;
    color: #fff;
}    margin-top: 5px; /* Espaçamento superior */
}

.installment {
    color: var(--text-main);
    font-size: 1rem;
    margin-bottom: 10px;
    font-weight: 500;
}

.savings {
    color: var(--primary-color);
    font-weight: 600;
    font-size: 0.9rem;
    background: rgba(0, 230, 118, 0.1);
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
}

.savings.no-discount {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-muted);
}

.pricing-features ul {
    list-style: none;
    margin-bottom: 30px;
}

.pricing-features li {
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-muted);
}

.pricing-features i {
    color: var(--primary-color);
}

.pricing-footer {
    margin-top: auto; /* Empurra o rodapé para o final do card */
}

.pricing-footer .btn {
    font-size: 0.8rem; /* Reduzido em aprox 5px do original 1.1rem */
}

/* Estilo específico para botões dos planos não destacados no hover */
.pricing-card:not(.featured) .btn:hover {
    background: #ffffff;
    color: #004d25; /* Verde escuro */
    border-color: var(--primary-color);
}

.guarantee {
    text-align: center;
    margin-top: 15px;
    font-size: 0.85rem;
    color: var(--text-muted);
}

/* FAQ */
.faq-grid {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.faq-item {
    background: var(--bg-card);
    border-radius: 16px;
    border: 2px solid rgba(255, 255, 255, 0.05);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.faq-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3), 0 0 10px rgba(0, 230, 118, 0.2);
    border-color: #00E676;
}

.faq-question {
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-weight: 600;
}

.faq-question i {
    transition: transform 0.3s;
}

.faq-item.active .faq-question i {
    transform: rotate(180deg);
}

.faq-answer {
    padding: 0 20px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
    color: var(--text-muted);
}

.faq-item.active .faq-answer {
    padding: 0 20px 20px;
    max-height: 1500px; /* cabe respostas longas, inclusive no celular */
}

/* Footer */
footer {
    background: #050505;
    padding: 60px 0 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
    flex-wrap: wrap;
    gap: 30px;
}

.footer-logo {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.footer-logo img {
    height: 35px;
    width: auto;
    margin-bottom: 10px;
}

.footer-logo p {
    font-size: 0.9rem;
    color: var(--text-muted);
    font-weight: 400;
    margin-top: 5px;
}

.footer-links {
    display: flex;
    gap: 20px;
}

.footer-links a {
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.9rem;
}

.footer-links a:hover {
    color: var(--primary-color);
}

.social-links {
    display: flex;
    gap: 15px;
}

.social-links a {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--text-main);
    text-decoration: none;
    transition: all 0.3s;
}

.social-links a:hover {
    background: var(--primary-color);
    color: #000;
}

.copyright {
    text-align: center;
    color: #555;
    font-size: 0.85rem;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* Responsive */
@media (max-width: 992px) {
    .hero-content {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 40px;
    }

    .hero-text p {
        margin-left: auto;
        margin-right: auto;
    }

    .hero-buttons {
        justify-content: center;
    }

    .hero-stats {
        justify-content: center;
    }

    .mockup-container {
        max-width: 600px;
        margin: 0 auto;
    }
}

@media (max-width: 768px) {
    html, body {
        width: 100%;
        max-width: 100vw;
        overflow-x: hidden;
        position: relative;
    }

    .navbar {
        width: 100vw; /* Força a largura da viewport */
        max-width: 100vw;
        left: 0;
        right: 0;
    }

    .container {
        width: 100%;
        max-width: 100%; /* Garante que não exceda a largura da tela */
        padding-left: 20px;
        padding-right: 20px;
    }

    .section {
        padding: 60px 0;
    }

    .nav-links {
        display: none;
        position: absolute;
        top: var(--nav-height);
        left: 0;
        width: 100%;
        box-sizing: border-box; /* Garante que o padding não aumente a largura total */
        background: rgba(10, 10, 10, 0.98);
        flex-direction: column;
        padding: 30px 20px; /* Alinhamento lateral com o container */
        text-align: center;
        backdrop-filter: blur(15px);
        border-bottom: 1px solid rgba(255,255,255,0.05);
        box-shadow: 0 10px 30px rgba(0,0,0,0.5);
        overflow-y: auto; /* Permite scroll vertical no menu se necessário */
        max-height: 80vh;
    }

    .nav-links.active {
        display: flex;
        animation: slideDown 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }

    @keyframes slideDown {
        from { opacity: 0; transform: translateY(-20px); }
        to { opacity: 1; transform: translateY(0); }
    }

    .btn-sm {
        display: none;
    }

    .btn-sm.btn-mobile-visible {
        display: inline-flex;
    }

    .menu-toggle {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 30px;
        height: 21px;
        cursor: pointer;
        padding-right: 0;
        z-index: 1100; /* Ensure it stays above nav-links */
    }

    .menu-toggle span {
        display: block;
        width: 100%;
        height: 3px;
        background-color: var(--text-main);
        border-radius: 3px;
        transition: all 0.3s ease-in-out;
    }

    /* Hamburger Animation to X */
    .menu-toggle.active span:nth-child(1) {
        transform: translateY(9px) rotate(45deg);
    }

    .menu-toggle.active span:nth-child(2) {
        opacity: 0;
    }

    .menu-toggle.active span:nth-child(3) {
        transform: translateY(-9px) rotate(-45deg);
    }

    .hero-text h1 {
        font-size: 2.2rem; /* Aumentado de 1.9rem para 2.2rem mantendo a quebra */
        word-wrap: break-word; /* Quebra palavras longas se necessário */
        overflow-wrap: break-word; /* Suporte moderno para quebra de palavras */
        hyphens: auto; /* Hifenização automática */
        max-width: 100%; /* Garante que não ultrapasse o container */
        line-height: 1.2;
    }

    .hero-text p,
    .section-header p {
        font-size: 1rem; /* Reduzido em ~2px */
        line-height: 1.4; /* Menor distância entre linhas */
        max-width: 100%;
    }

    .section-header h2 {
        font-size: 2.2rem; /* Mesmo tamanho do título Hero mobile */
        line-height: 1.1; /* Espaçamento reduzido */
        max-width: 100%;
    }

    .stat-card {
        justify-content: center; /* Centraliza o conjunto ícone + texto no card */
    }
    
    /* Ajuste para Grids em Mobile para evitar overflow */
    .features-grid, 
    .pricing-grid, 
    .testimonials-grid, 
    .about-grid {
        grid-template-columns: 1fr; /* Coluna única em mobile */
    }

    .steps {
        grid-template-columns: 1fr;
    }

    .steps .step:not(:last-child)::after {
        display: none;
    }
    
    .steps .step:not(:last-child)::before {
        /* Transforma a linha horizontal em vertical para mobile */
        width: 2px;
        height: 100%;
        top: auto;
        bottom: -30px; /* Estende até o próximo item através do gap */
        left: 50%;
        transform: translateX(-50%);
        background: linear-gradient(to bottom, rgba(255,255,255,0.1) 50%, transparent 100%);
    }

    /* Remove a linha horizontal completamente para evitar resquícios */
    .steps .step::before {
        right: auto;
    }

    .footer-content {
        flex-direction: column;
        text-align: center;
        align-items: center;
        gap: 30px;
    }

    .footer-logo {
        align-items: center;
        width: 100%;
        margin-bottom: 10px;
    }

    .footer-logo img {
        margin: 0 auto 10px auto;
        display: block;
        height: 50px; /* Aumentado para mobile */
    }

    .footer-logo p {
        text-align: center;
        width: 100%;
    }

    .about {
        padding-bottom: 40px; /* Reduzido de 100px para 40px conforme solicitado */
    }

    /* Ajustes Específicos Mobile - Padding e Divisores */
    .screenshot-section {
        padding-bottom: 60px !important; /* Sobrescreve inline style */
    }

    .about,
    .how-it-works {
        padding-top: 80px; /* 60px padrão + 20px extra para compensar divisor */
    }

    /* Garantir que o divisor não seja cortado */
    .section {
        overflow: visible;
    }

    .pricing-grid {
        gap: 50px; /* Aumentado de 30px para 50px conforme solicitado */
    }

    /* Títulos de Páginas (Termos e Política) em uma linha */
    .page-title {
        font-size: clamp(1rem, 5.5vw, 1.5rem) !important; /* Responsivo para caber */
        white-space: nowrap; /* Força linha única */
        line-height: 1.2;
    }
}


/* About Section */
.about {
    background: #0f0f0f;
}

.about-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

.about-card {
    background: transparent;
    padding: 26px;
    border-radius: 16px;
    position: relative;
    transition: transform 0.3s ease;
    isolation: isolate; /* Cria novo contexto de empilhamento */
    text-align: center; /* Centraliza texto e elementos inline-block */
}

/* ... (código existente) ... */

/* Background do card */
.about-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--bg-card);
    border-radius: inherit;
    z-index: -1;
    border: 1px solid rgba(255, 255, 255, 0.05); /* Borda padrão */
}

/* Borda animada (Glow) */
.about-card::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 18px; /* 16px + 2px */
    background: conic-gradient(
        from var(--border-angle),
        transparent 20%,
        var(--primary-color),
        transparent 80%
    );
    z-index: -2;
    opacity: 0;
    transition: opacity 0.3s ease;
    animation: rotate-border 3s linear infinite;
}

.about-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 186, 0, 0.2); /* Sombra verde difusa */
}

.about-card:hover::before {
    opacity: 1;
}

.about-card h3 {
    display: flex;
    align-items: center;
    justify-content: center; /* Centraliza o flex container (ícone + texto) */
    gap: 10px;
    font-size: 1.15rem;
    margin-bottom: 10px;
}

.about-card h3 i {
    color: var(--primary-color);
}

.about-card p {
    color: var(--text-muted);
    font-size: 0.95rem;
    text-wrap: balance; /* Melhora a quebra de linha para evitar viúvas */
}


/* Carrossel de telas */
.shot-carousel-wrap { margin-top: 90px; }
.shot-carousel { position: relative; height: 560px; user-select: none; touch-action: pan-y; outline: none; }
.shot-stage { position: absolute; inset: 0; overflow: hidden; }
.shot-slide {
    --step: 215px;
    --o: 0;
    --a: 0;
    position: absolute; top: 0; left: 50%; height: 100%; aspect-ratio: 1346 / 2953; margin: 0;
    transform: translateX(-50%) translateX(calc(var(--o) * var(--step))) scale(calc(1 - var(--a) * 0.14));
    opacity: calc(1 - var(--a) * 0.32); z-index: calc(10 - var(--a));
    transition: transform .6s cubic-bezier(.22,.8,.3,1), opacity .6s ease, filter .6s ease;
    filter: brightness(calc(1 - var(--a) * 0.18));
    cursor: pointer;
}
.shot-slide[data-far="1"] { opacity: 0; pointer-events: none; }
.shot-slide img {
    width: 100%; height: 100%; display: block; object-fit: cover; border-radius: 4px;
    border: 1px solid rgba(255,255,255,0.12); box-shadow: 0 18px 40px rgba(0,0,0,.55);
}
.shot-slide.is-active { cursor: default; }
.shot-slide.is-active img { border-color: rgba(0,186,0,.55); box-shadow: 0 18px 50px rgba(0,0,0,.6), 0 0 36px rgba(0,186,0,.22); }
.shot-arrow {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 20; width: 46px; height: 46px; border-radius: 50%;
    border: 1px solid rgba(255,255,255,.18); background: rgba(22,22,22,.85); color: #fff; cursor: pointer;
    transition: background .2s, border-color .2s;
}
.shot-arrow:hover, .shot-arrow:focus-visible { background: var(--primary-color); border-color: var(--primary-color); outline: none; }
.shot-prev { left: max(0px, calc(50% - 520px)); }
.shot-next { right: max(0px, calc(50% - 520px)); }
.shot-captions { position: relative; min-height: 110px; margin-top: 28px; text-align: center; }
.shot-caption { position: absolute; inset: 0 0 auto 0; opacity: 0; transform: translateY(8px); transition: opacity .4s ease, transform .4s ease; pointer-events: none; }
.shot-caption.is-active { opacity: 1; transform: none; pointer-events: auto; }
.shot-caption h3 { color: var(--primary-color); font-size: 1.35rem; margin-bottom: 8px; }
.shot-caption p { color: var(--text-muted); max-width: 520px; margin: 0 auto; line-height: 1.6; }
.shot-dots { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.shot-dot { width: 26px; height: 26px; border: 0; background: transparent; cursor: pointer; position: relative; }
.shot-dot::after { content: ""; position: absolute; top: 50%; left: 50%; width: 9px; height: 9px; border-radius: 50%; background: #444; transform: translate(-50%,-50%); transition: background .3s, width .3s; }
.shot-dot.is-active::after { background: var(--primary-color); width: 22px; border-radius: 6px; }
.shot-dot:focus-visible { outline: 2px solid var(--primary-color); border-radius: 6px; }

@media (max-width: 768px) {
    .shot-carousel-wrap { margin-top: 60px; }
    .shot-carousel { height: 440px; }
    .shot-slide { --step: 150px; }
    .shot-slide[data-far="2"] { opacity: 0; pointer-events: none; }
    .shot-arrow { width: 38px; height: 38px; }
    .shot-prev { left: 0; } .shot-next { right: 0; }
    .shot-captions { min-height: 130px; padding: 0 8px; }
}
@media (prefers-reduced-motion: reduce) {
    .shot-slide, .shot-caption { transition: none; }
}

/* Uso Responsável: ícone em cima, texto centralizado abaixo */
.responsible-use .about-card h3 { flex-direction: column; gap: 14px; text-align: center; }
.responsible-use .about-card h3 i { font-size: 2.2rem; }
.responsible-use .about-card h3 .resp-lottie { width: 60px; height: 60px; }


/* Cards de planos montados a partir do controle */
.pricing-card.plano-dinamico { animation: planoEntra .4s ease both; }
@keyframes planoEntra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.pricing-card .pricing-header .price-free { color: var(--primary-color); }
.pricing-card.plano-etiqueta:not(.featured) { border-color: rgba(0, 186, 0, 0.35); }
@media (prefers-reduced-motion: reduce) { .pricing-card.plano-dinamico { animation: none; } }
.pricing-card.plano-dinamico { display: flex; flex-direction: column; }
.pricing-card.plano-dinamico .pricing-features { flex: 1; }


/* Selo "7 dias grátis" flutuando ao lado da imagem do topo */
.hero-trial-badge {
    position: absolute;
    right: -56px;
    top: 4%;
    width: clamp(90px, 11.25vw, 143px);
    z-index: 5;
    display: block;
    animation: seloFlutua 6.5s ease-in-out infinite;
    filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 14px rgba(0, 230, 118, 0.35));
    transition: scale .25s ease;
}
.hero-trial-badge img { width: 100%; height: auto; display: block; }
.hero-trial-badge:hover { scale: 1.08; }
@keyframes seloFlutua {
    0%   { transform: translateY(0) rotate(-5deg); }
    50%  { transform: translateY(-16px) rotate(4deg); }
    100% { transform: translateY(0) rotate(-5deg); }
}
/* em telas mais estreitas, o selo não passa da borda da tela */
@media (max-width: 1399px) { .hero-trial-badge { right: -24px; } }
@media (max-width: 1100px) { .hero-trial-badge { right: 0; } }
@media (max-width: 768px) {
    /* no celular: embaixo da imagem, entre a 2ª e a 3ª tela, 80% sobre a imagem e 20% fora */
    .hero-trial-badge { top: auto; right: auto; bottom: 0; left: 68%; translate: -50% 20%; width: clamp(104px, 29vw, 128px); }
    .hero-image { margin-bottom: 36px; }
}
@media (prefers-reduced-motion: reduce) {
    .hero-trial-badge { animation: none; }
}

/* ===== Chatbot (Fluxos): seção de destaque ===== */
.chatbot-section { position: relative; overflow: hidden; }
.chatbot-section::before {
    content: '';
    position: absolute;
    right: -12%;
    bottom: -25%;
    width: 70%;
    height: 80%;
    background: radial-gradient(closest-side, rgba(0, 186, 0, 0.16), transparent);
    pointer-events: none;
}
.chatbot-grid {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 56px;
    align-items: center;
}
.chatbot-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(0, 186, 0, 0.12);
    border: 1px solid rgba(0, 186, 0, 0.4);
    color: #4be04b;
    border-radius: 20px;
    padding: 4px 14px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 18px;
}
.chatbot-copy h2 { font-size: 2.6rem; font-weight: 700; line-height: 1.2; margin-bottom: 16px; text-wrap: balance; }
.chatbot-lead { color: var(--text-muted); font-size: 1.05rem; margin-bottom: 28px; }
.chatbot-points { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin: 64px 0 0; padding: 0; position: relative; }
.chatbot-note { display: flex; gap: 10px; align-items: flex-start; color: var(--text-muted); font-size: 0.85rem; margin-bottom: 26px; }
.chatbot-note i { color: var(--primary-color); margin-top: 3px; }

/* Ilustração do quadro + conversa. Tudo em "em": o palco inteiro escala com a largura da coluna (64em = largura do palco). */
.cb-visual { container-type: inline-size; width: 100%; max-width: 700px; margin: 0 auto; }
.cb-stage {
    position: relative;
    width: 100%;
    aspect-ratio: 64 / 54;
    font-family: 'Poppins', 'Inter', sans-serif;
    font-size: 10px;
    font-size: calc(100cqw / 64);
    line-height: 1.35;
    color: #2b2b2b;
    text-align: left;
}
.cb-stage * { box-sizing: border-box; }

.cb-board {
    position: absolute;
    left: 0;
    top: 0;
    width: 44em;
    height: 44em;
    background-color: #f4f3f1;
    background-image: radial-gradient(#cfcdc8 0.1em, transparent 0.11em);
    background-size: 2.2em 2.2em;
    border-radius: 1.2em;
    overflow: hidden;
    box-shadow: 0 2em 5em rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.cb-bar {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 3.2em;
    background: #fff;
    border-bottom: 1px solid #e2e0dd;
    display: flex;
    align-items: center;
    gap: 0.8em;
    padding: 0 1.2em;
    font-size: 1.1em;
    font-weight: 600;
    z-index: 3;
}
.cb-bar i { color: #015901; }
.cb-pill { background: #e8f5e9; color: #2e7d32; border-radius: 1em; padding: 0.1em 0.8em; font-size: 0.8em; font-weight: 700; }
.cb-lines { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; overflow: visible; }
.cb-lines path { fill: none; stroke: #1565c0; stroke-width: 2; stroke-dasharray: 6 5; opacity: 0.9; animation: cb-flow 1.4s linear infinite; }
@keyframes cb-flow { to { stroke-dashoffset: -22; } }

.cb-node {
    position: absolute;
    z-index: 2;
    width: 14em;
    background: #fff;
    border-radius: 1em;
    border-top: 0.4em solid #8d8d8d;
    box-shadow: 0 0.1em 0.4em rgba(0, 0, 0, 0.22);
    padding: 0.8em 1em 1em;
}
.cb-node.cb-wide { width: 15em; }
.cb-node.cb-start { border-top-color: #2e7d32; }
.cb-in {
    position: absolute;
    left: -0.6em;
    top: 1.3em;
    width: 1.2em;
    height: 1.2em;
    border-radius: 50%;
    border: 0.2em solid #8d8d8d;
    background: #fff;
}
.cb-node-t { display: flex; align-items: center; gap: 0.5em; font-weight: 700; font-size: 1.15em; margin-bottom: 0.5em; }
.cb-node-t i { color: #2e7d32; font-size: 0.85em; }
.cb-node-m { background: #f6f8f9; border-radius: 0.7em; padding: 0.6em 0.8em; color: #555; font-style: italic; }
.cb-opt { position: relative; display: flex; align-items: center; gap: 0.6em; margin-top: 0.6em; font-weight: 600; }
.cb-n {
    flex: none;
    width: 1.8em;
    height: 1.8em;
    border-radius: 50%;
    background: #015901;
    color: #fff;
    font-size: 0.9em;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cb-port {
    position: absolute;
    right: -1.6em;
    top: 50%;
    width: 1.2em;
    height: 1.2em;
    margin-top: -0.6em;
    border-radius: 50%;
    background: #1565c0;
    border: 0.2em solid #fff;
    box-shadow: 0 0 0 0.1em #1565c0;
}
.cb-chips { display: flex; flex-wrap: wrap; gap: 0.4em; margin-top: 0.7em; }
.cb-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    background: #eef5ee;
    color: #27402a;
    border-radius: 1em;
    padding: 0.2em 0.7em;
    font-size: 0.92em;
    font-weight: 600;
}
.cb-chip.cb-blue { background: #e3eefb; color: #0d47a1; }

/* conversa no WhatsApp */
.cb-cap { position: absolute; left: 0; top: 36.2em; width: 30.4em; /* o corpo é 1.25em, então as medidas são divididas por 1.25 */ margin: 0; text-align: center; font-family: var(--font-main); font-size: 1.25em; color: var(--text-muted); }
.cb-chat {
    position: absolute;
    right: 0;
    top: 7em;
    z-index: 4;
    width: 25em;
    height: 46em;
    background: #efeae2;
    border: 0.35em solid #1d1f1e;
    border-radius: 2em;
    overflow: hidden;
    box-shadow: 0 2em 5em rgba(0, 0, 0, 0.6);
    display: flex;
    flex-direction: column;
}
.cb-chat-h { flex: none; background: #075e54; color: #fff; padding: 1em 1.2em; display: flex; align-items: center; gap: 0.8em; font-size: 1.1em; font-weight: 600; }
.cb-avatar { width: 2.4em; height: 2.4em; border-radius: 50%; background: #cfd8dc; color: #455a64; display: flex; align-items: center; justify-content: center; font-weight: 700; }
.cb-chat-h small { display: block; font-size: 0.7em; font-weight: 400; opacity: 0.8; line-height: 1.2; }
.cb-msgs { flex: 1; min-height: 0; padding: 1em; display: flex; flex-direction: column; gap: 0.6em; }
.cb-b { max-width: 82%; border-radius: 0.8em; padding: 0.5em 0.8em; box-shadow: 0 0.05em 0.1em rgba(0, 0, 0, 0.18); background: #fff; font-size: 1em; }
.cb-b.cb-me { align-self: flex-end; background: #d9fdd3; }
.cb-b b { font-weight: 700; }
.cb-audio { display: flex; align-items: center; gap: 0.7em; min-width: 15em; }
.cb-audio .cb-play { flex: none; width: 2.2em; height: 2.2em; border-radius: 50%; background: #00a884; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 0.9em; }
.cb-wave { flex: 1; display: flex; align-items: center; gap: 0.2em; height: 2em; }
.cb-wave i { display: block; width: 0.25em; border-radius: 0.2em; background: #8696a0; }
.cb-audio small { font-size: 0.8em; color: #667781; }
.cb-doc { display: flex; align-items: center; gap: 0.7em; min-width: 15em; }
.cb-doc .cb-pdf { flex: none; width: 2.4em; height: 2.8em; border-radius: 0.4em; background: #e53935; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1em; }
.cb-doc strong { display: block; font-weight: 600; line-height: 1.2; }
.cb-doc small { font-size: 0.8em; color: #667781; }

.cb-toast {
    position: absolute;
    right: 0;
    top: 0;
    z-index: 5;
    width: 24.5em;
    background: #fff;
    border-radius: 1em;
    border-left: 0.5em solid #f5a623;
    padding: 0.8em 1em;
    display: flex;
    align-items: center;
    gap: 0.9em;
    box-shadow: 0 1em 3em rgba(0, 0, 0, 0.5);
}
.cb-toast > i { color: #f5a623; font-size: 1.5em; }
.cb-toast-t { flex: 1; min-width: 0; font-size: 1em; line-height: 1.25; }
.cb-toast-t strong { display: block; font-weight: 700; }
.cb-toast-t span { font-size: 0.85em; color: #777; }
.cb-toast-b { flex: none; background: #015901; color: #fff; border-radius: 0.7em; padding: 0.45em 1.1em; font-weight: 700; font-size: 1em; }

@media (max-width: 992px) {
    .chatbot-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
    .chatbot-copy h2 { font-size: 2rem; }
    .chatbot-points { margin-top: 48px; }
}
@media (max-width: 700px) {
    .chatbot-points { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
    .cb-lines path { animation: none; }
}

/* selo do hero: se não couber em uma linha, quebra entre as duas partes */
.badge .badge-part { display: inline-block; }
.badge { text-align: center; line-height: 1.35; }

/* ===== Agenda (seção com ilustração animada) ===== */
.agenda-section { position: relative; overflow: hidden; }
.agenda-section::before {
    content: '';
    position: absolute;
    left: -12%;
    top: -10%;
    width: 70%;
    height: 80%;
    background: radial-gradient(closest-side, rgba(0, 186, 0, 0.14), transparent);
    pointer-events: none;
}
.agenda-grid { position: relative; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; align-items: center; }
.agenda-copy { order: 2; }
.agenda-copy h2 { font-size: 2.6rem; font-weight: 700; line-height: 1.2; margin-bottom: 16px; text-wrap: balance; }

.ag-visual { container-type: inline-size; width: 100%; max-width: 700px; margin: 0 auto; }
.ag-stage {
    position: relative;
    width: 100%;
    aspect-ratio: 64 / 50;
    font-family: 'Poppins', 'Inter', sans-serif;
    font-size: 10px;
    font-size: calc(100cqw / 64);
    line-height: 1.35;
    color: #2b2b2b;
    text-align: left;
}
.ag-stage * { box-sizing: border-box; }
.ag-stage b, .ag-stage strong { font-weight: 700; }

.ag-cal { position: absolute; left: 0; top: 0; width: 41em; height: 43em; background: #fff; border-radius: 1.2em; overflow: hidden; box-shadow: 0 2em 5em rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.08); }
.ag-cal-h { display: flex; align-items: center; gap: 0.7em; background: #015901; color: #fff; font-weight: 600; font-size: 1.5em; padding: 0.8em 1em; }
.ag-nav { margin-left: auto; display: flex; gap: 1em; font-size: 0.8em; opacity: 0.85; }
.ag-week { display: grid; grid-template-columns: repeat(7, 1fr); padding: 1em 1em 0.2em; text-align: center; font-size: 1.1em; font-weight: 600; color: #8a8f8a; }
.ag-days { display: grid; grid-template-columns: repeat(7, 1fr); grid-auto-rows: 5.9em; gap: 0.3em; padding: 0.4em 1em 0; }
.ag-day { position: relative; border-radius: 0.8em; display: flex; flex-direction: column; align-items: center; padding-top: 0.7em; font-size: 1.15em; color: #333; }
.ag-day.ag-past { color: #b3b7b3; }
.ag-day b { font-weight: 600; width: 1.9em; height: 1.9em; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.ag-today { background: #e8f5e9; }
.ag-today b { background: #015901; color: #fff; }
.ag-dots { display: flex; gap: 0.3em; margin-top: 0.45em; min-height: 0.7em; }
.ag-d { display: inline-block; width: 0.7em; height: 0.7em; border-radius: 50%; }
.ag-g { background: #00a884; }
.ag-b { background: #1e6fd9; }
.ag-o { background: #f5a623; }
.ag-dots .ag-d { transform: scale(0); }
.ag-legend { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; gap: 2em; padding: 1em; font-size: 1.05em; color: #6b706b; border-top: 1px solid #eef0ee; background: #fff; }
.ag-legend span { display: inline-flex; align-items: center; gap: 0.5em; }

.ag-day-panel { position: absolute; left: 43em; top: 5em; width: 21em; height: 33em; background: #fff; border-radius: 1.2em; padding: 1.4em 1.3em; box-shadow: 0 2em 5em rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.08); }
.ag-panel-h { font-size: 1.6em; font-weight: 700; margin-bottom: 0.6em; color: #015901; }
.ag-panel-h small { font-size: 0.55em; font-weight: 500; color: #888; margin-left: 0.5em; }
.ag-item { position: relative; display: flex; align-items: center; gap: 0.7em; padding: 0.9em 0; border-top: 1px solid #eef0ee; font-size: 1em; }
.ag-time { flex: none; width: 3.6em; font-weight: 600; color: #555; font-size: 1.05em; }
.ag-bar { flex: none; width: 0.35em; align-self: stretch; border-radius: 0.3em; }
.ag-item strong { display: inline-block; position: relative; font-size: 1.1em; line-height: 1.25; }
.ag-item small { display: block; color: #888; font-size: 0.9em; margin-top: 0.2em; }
.ag-item small i { margin-right: 0.3em; }
.ag-check { position: absolute; right: 0; top: 50%; width: 2em; height: 2em; margin-top: -1em; border-radius: 50%; border: 0.15em solid #cfd8cf; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 0.9em; }
.ag-check i { transform: scale(0); }
.ag-strike::after { content: ''; position: absolute; left: 0; top: 55%; height: 0.14em; width: 100%; background: #6b706b; transform: scaleX(0); transform-origin: left; }

.ag-toast { position: absolute; right: 0; bottom: 0; z-index: 5; width: 38em; background: #fff; border-radius: 1.1em; border-left: 0.5em solid #f5a623; padding: 1em 1.2em; display: flex; align-items: center; gap: 1em; box-shadow: 0 1em 3em rgba(0, 0, 0, 0.5); opacity: 0; transform: translateY(6em); }
.ag-bell { position: relative; flex: none; width: 2.6em; height: 2.6em; border-radius: 50%; background: #fff4de; color: #f5a623; display: flex; align-items: center; justify-content: center; font-size: 1.3em; }
.ag-ring { position: absolute; inset: 0; border-radius: 50%; border: 0.1em solid #f5a623; opacity: 0; }
.ag-toast-t { flex: 1; min-width: 0; line-height: 1.25; }
.ag-toast-t strong { display: block; font-size: 1.2em; }
.ag-toast-t span { font-size: 0.95em; color: #777; }
.ag-toast-b { flex: none; border-radius: 0.7em; padding: 0.5em 1.1em; font-weight: 700; font-size: 1.05em; background: #eef0ee; color: #444; }
.ag-toast-b.ag-btn-done { background: #015901; color: #fff; }

/* animações: só rodam enquanto a seção está visível (o script alterna .scroll-visible) */
.scroll-visible .ag-dots .ag-d { animation: ag-pop 0.5s cubic-bezier(0.3, 1.5, 0.5, 1) both; animation-delay: calc(0.5s + var(--i) * 0.09s); }
@keyframes ag-pop { from { transform: scale(0); } to { transform: scale(1); } }
.scroll-visible .ag-today { animation: ag-today 12s ease-in-out infinite; }
@keyframes ag-today { 0%, 22%, 100% { box-shadow: 0 0 0 0 rgba(1, 89, 1, 0); } 30% { box-shadow: 0 0 0 0.5em rgba(1, 89, 1, 0.22); } 40% { box-shadow: 0 0 0 0 rgba(1, 89, 1, 0); } }
.scroll-visible .ag-toast { animation: ag-toast 12s ease-in-out infinite; }
@keyframes ag-toast {
    0%, 24% { opacity: 0; transform: translateY(6em); }
    30%, 60% { opacity: 1; transform: translateY(0); }
    66%, 100% { opacity: 0; transform: translateY(6em); }
}
.scroll-visible .ag-bell i { animation: ag-shake 12s ease-in-out infinite; transform-origin: 50% 10%; }
@keyframes ag-shake {
    0%, 29% { transform: rotate(0); }
    31% { transform: rotate(18deg); } 33% { transform: rotate(-16deg); } 35% { transform: rotate(14deg); }
    37% { transform: rotate(-12deg); } 39% { transform: rotate(8deg); } 41%, 100% { transform: rotate(0); }
}
.scroll-visible .ag-ring { animation: ag-ring 12s ease-out infinite; }
@keyframes ag-ring { 0%, 29% { opacity: 0; transform: scale(1); } 30% { opacity: 0.8; } 44%, 100% { opacity: 0; transform: scale(1.9); } }
.scroll-visible .ag-btn-done { animation: ag-press 12s ease-in-out infinite; }
@keyframes ag-press { 0%, 54% { transform: scale(1); filter: none; } 56% { transform: scale(0.88); filter: brightness(1.25); } 59%, 100% { transform: scale(1); filter: none; } }
.scroll-visible .ag-check { animation: ag-checkbg 12s ease-in-out infinite; }
.scroll-visible .ag-check i { animation: ag-checki 12s ease-in-out infinite; }
.scroll-visible .ag-strike::after { animation: ag-line 12s ease-in-out infinite; }
.scroll-visible .ag-item-live { animation: ag-live 12s ease-in-out infinite; }
@keyframes ag-checkbg { 0%, 59% { background: transparent; border-color: #cfd8cf; } 62%, 94% { background: #00a884; border-color: #00a884; } 98%, 100% { background: transparent; border-color: #cfd8cf; } }
@keyframes ag-checki { 0%, 59% { transform: scale(0); } 63% { transform: scale(1.3); } 66%, 94% { transform: scale(1); } 98%, 100% { transform: scale(0); } }
@keyframes ag-line { 0%, 61% { transform: scaleX(0); } 70%, 94% { transform: scaleX(1); } 98%, 100% { transform: scaleX(0); } }
@keyframes ag-live { 0%, 59% { opacity: 1; } 64%, 94% { opacity: 0.55; } 98%, 100% { opacity: 1; } }

@media (max-width: 992px) {
    .agenda-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
    .agenda-copy { order: 0; }
    .agenda-copy h2 { font-size: 2rem; }
}
@media (prefers-reduced-motion: reduce) {
    .scroll-visible .ag-dots .ag-d { animation: none; transform: scale(1); }
    .scroll-visible .ag-today, .scroll-visible .ag-toast, .scroll-visible .ag-bell i, .scroll-visible .ag-ring, .scroll-visible .ag-btn-done,
    .scroll-visible .ag-check, .scroll-visible .ag-check i, .scroll-visible .ag-strike::after, .scroll-visible .ag-item-live { animation: none; }
    .ag-dots .ag-d { transform: scale(1); }
    .ag-toast { opacity: 1; transform: none; }
}

/* Cards de planos: o número de colunas é a quantidade de planos (máx. 3), sem quebrar a linha */
.pricing-grid.pricing-dyn { grid-template-columns: repeat(var(--cols, 3), minmax(0, 380px)); justify-content: center; align-items: stretch; }
@media (max-width: 992px) {
    .pricing-grid.pricing-dyn { grid-template-columns: minmax(0, 380px); }
}

/* ===== Slides de ilustração no carrossel (telas cheias: Dashboard e Agenda) ===== */
.shot-slide { transform: translate(-50%, var(--ty, 0%)) translateX(var(--x, 0px)) scale(calc(1 - var(--a) * 0.14)); }
.shot-slide.is-wide { height: auto; aspect-ratio: auto; width: min(620px, 88%); top: 50%; --ty: -50%; }
.sim-panel {
    background: #0f1410; border-radius: 10px; padding: 3.5%;
    border: 1px solid rgba(255,255,255,0.12); box-shadow: 0 18px 40px rgba(0,0,0,.55);
}
.shot-slide.is-active .sim-panel { border-color: rgba(0,186,0,.55); box-shadow: 0 18px 50px rgba(0,0,0,.6), 0 0 36px rgba(0,186,0,.22); }
.sim-panel .ag-visual { max-width: none; }
.sim-panel .ag-cal, .sim-panel .ag-day-panel, .sim-panel .ag-toast { box-shadow: none; }

/* Dashboard (mesma escala "em" do palco: 64em de largura) */
.db-card { position: absolute; inset: 0; background: #f4f6f4; border-radius: 1.2em; overflow: hidden; display: flex; flex-direction: column; }
.db-head { flex: none; display: flex; align-items: center; gap: 0.7em; background: #015901; color: #fff; font-weight: 600; font-size: 1.5em; padding: 0.7em 1em; }
.db-chips { margin-left: auto; display: flex; gap: 0.5em; font-size: 0.62em; font-weight: 600; }
.db-chips span { padding: 0.35em 0.9em; border-radius: 2em; background: rgba(255,255,255,0.14); }
.db-chips .db-on { background: #fff; color: #015901; }
.db-body { flex: 1; min-height: 0; padding: 1.4em 1.6em 1.6em; display: flex; flex-direction: column; gap: 1.2em; }
.db-row { display: grid; gap: 1.2em; }
.db-r4 { grid-template-columns: repeat(4, 1fr); }
.db-r3 { grid-template-columns: repeat(3, 1fr); }
.db-r2 { grid-template-columns: 1fr 1fr; flex: 1; min-height: 0; }
.db-tile { background: #fff; border-radius: 0.9em; padding: 0.9em 1.1em; box-shadow: 0 0.1em 0.4em rgba(0,0,0,0.08); border-top: 0.3em solid #cfd8cf; }
.db-tile small { display: block; color: #6b706b; font-size: 1.05em; }
.db-tile b { display: block; font-size: 2.2em; line-height: 1.2; color: #1d1f1e; margin: 0.1em 0; }
.db-tile > span { font-size: 0.95em; font-weight: 600; }
.db-up { color: #2e7d32; }
.db-down { color: #c62828; }
.db-mute { color: #6b706b; }
.db-alert { border-top-color: #c62828; }
.db-alert b { color: #c62828; }
.db-blue { border-top-color: #1e6fd9; } .db-blue b { color: #1e6fd9; }
.db-green { border-top-color: #2e7d32; } .db-green b { color: #2e7d32; }
.db-red { border-top-color: #c62828; } .db-red b { color: #c62828; }
.db-panel { background: #fff; border-radius: 0.9em; padding: 1em 1.2em; box-shadow: 0 0.1em 0.4em rgba(0,0,0,0.08); display: flex; flex-direction: column; min-height: 0; }
.db-panel-t { font-weight: 700; font-size: 1.2em; color: #015901; margin-bottom: 0.6em; }
.db-panel-t small { font-weight: 500; font-size: 0.75em; color: #888; margin-left: 0.5em; }
.db-bars { flex: 1; min-height: 0; display: flex; align-items: flex-end; gap: 0.6em; border-bottom: 1px solid #e3e8e3; }
.db-bars i { flex: 1; height: var(--h); background: #a5d6a7; border-radius: 0.3em 0.3em 0 0; transform-origin: bottom; }
.db-bars i.db-peak { background: #015901; }
.db-hours { display: flex; justify-content: space-between; font-size: 0.9em; color: #8a8f8a; padding-top: 0.4em; }
.db-wait { display: flex; align-items: center; gap: 0.8em; padding: 0.55em 0; border-top: 1px solid #eef0ee; }
.db-wait:first-of-type { border-top: 0; }
.db-wait > div { flex: 1; min-width: 0; line-height: 1.25; }
.db-wait strong { display: block; font-size: 1.1em; }
.db-wait small { color: #c62828; font-size: 0.9em; }
.db-av { flex: none; width: 2.6em; height: 2.6em; border-radius: 50%; background: #cfd8dc; color: #455a64; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.db-av2 { background: #ffe0b2; color: #e65100; } .db-av3 { background: #c8e6c9; color: #1b5e20; }
.db-open { flex: none; background: #015901; color: #fff; border-radius: 0.6em; padding: 0.4em 0.9em; font-weight: 600; font-size: 0.95em; }

.scroll-visible .db-bars i { animation: db-grow 0.8s cubic-bezier(0.3, 1.2, 0.5, 1) both; animation-delay: calc(0.3s + var(--i) * 0.07s); }
@keyframes db-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.scroll-visible .db-alert { animation: db-alert 3s ease-in-out infinite; }
@keyframes db-alert { 0%, 100% { box-shadow: 0 0.1em 0.4em rgba(0,0,0,0.08); } 50% { box-shadow: 0 0 0 0.4em rgba(198,40,40,0.18); } }
.scroll-visible .db-pulse { animation: db-pulse 2.4s ease-in-out infinite; }
@keyframes db-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); filter: brightness(1.2); } }

@media (prefers-reduced-motion: reduce) {
    .scroll-visible .db-bars i, .scroll-visible .db-alert, .scroll-visible .db-pulse { animation: none; }
}

/* ===== Moldura única dos slides de simulação: fundo branco, mesmo tamanho ===== */
.sim-panel { background: #fff; border: 1px solid #dfe5df; box-shadow: 0 18px 40px rgba(0,0,0,.45); }
.shot-slide.is-active .sim-panel { border-color: rgba(0,186,0,.7); box-shadow: 0 18px 50px rgba(0,0,0,.55), 0 0 36px rgba(0,186,0,.28); }
.sim-panel .ag-stage { aspect-ratio: 64 / 54; }
.sim-panel .cb-visual { max-width: none; }
.sim-panel .ag-cal, .sim-panel .ag-day-panel, .sim-panel .ag-toast { box-shadow: 0 0.2em 1.2em rgba(0,0,0,0.16), 0 0 0 1px rgba(0,0,0,0.08); }
.sim-panel .ag-cal { height: 52em; }
.sim-panel .ag-days { grid-auto-rows: 7.4em; }
.sim-panel .ag-day-panel { top: 6em; height: 40em; }
.sim-panel .db-card { box-shadow: 0 0 0 1px #dfe5df; }
.sim-panel .cb-stage, .sim-panel .db-stage { font-size: calc(100cqw / 64); }

/* Funil */
.fn-body { flex: 1; min-height: 0; padding: 1.6em; display: grid; grid-template-columns: 1.35fr 1fr; gap: 1.4em; }
.fn-left { min-height: 0; }
.fn-steps { position: relative; flex: 1; display: flex; flex-direction: column; justify-content: space-around; padding-left: 0.2em; }
.fn-steps::before { content: ''; position: absolute; left: 1.6em; top: 2em; bottom: 2em; width: 0.2em; background: #dfe8df; }
.fn-step { position: relative; display: grid; grid-template-columns: 3.4em 1fr; grid-template-areas: "n m" ". w"; column-gap: 0.8em; row-gap: 0.2em; align-items: center; }
.fn-n { grid-area: n; width: 3.2em; height: 3.2em; border-radius: 50%; background: #015901; color: #fff; font-weight: 700; font-size: 1.2em; display: flex; align-items: center; justify-content: center; position: relative; z-index: 1; }
.fn-msg { grid-area: m; background: #f4f6f4; border-radius: 0.8em; padding: 0.7em 1em; display: flex; gap: 0.7em; align-items: center; font-size: 1.05em; color: #444; }
.fn-msg i { color: #015901; }
.fn-when { grid-area: w; font-size: 0.95em; color: #6b706b; font-weight: 600; }
.fn-ok { position: absolute; right: 0.8em; top: 0.6em; width: 1.9em; height: 1.9em; border-radius: 50%; background: #00a884; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 0.9em; }
.fn-right { display: flex; flex-direction: column; gap: 1.2em; min-height: 0; }
.fn-people { flex: 1; }
.fn-p { display: flex; align-items: center; gap: 0.8em; padding: 0.7em 0; border-top: 1px solid #eef0ee; }
.fn-p > div { flex: 1; min-width: 0; line-height: 1.25; }
.fn-p strong { display: block; font-size: 1.1em; }
.fn-p small { color: #6b706b; font-size: 0.9em; }
.fn-bar { display: block; height: 0.6em; background: #e5ebe5; border-radius: 1em; margin-top: 0.4em; overflow: hidden; }
.fn-bar i { display: block; width: var(--w); height: 100%; background: #00a884; border-radius: 1em; transform-origin: left; }
.fn-bar.fn-done i { background: #015901; }

/* Atendimento (quadro de etapas) */
.kb-col { position: absolute; top: 6.4em; width: 14.3em; height: 45.8em; background: #eef1ee; border-radius: 0.9em; }
.kb-h { padding: 0.9em 1em; line-height: 1.25; }
.kb-h strong { display: block; font-size: 1.2em; color: #015901; }
.kb-h small, .kb-tot { font-size: 0.95em; color: #6b706b; font-weight: 600; }
.kb-tot { position: relative; display: inline-block; min-width: 6em; }
.kb-tot span { display: block; }
.kb-tot .kb-t2 { position: absolute; left: 0; top: 0; opacity: 0; color: #2e7d32; }
.kb-won-col .kb-h strong { color: #2e7d32; }
.kb-card, .kb-mover { position: absolute; left: 0.8em; width: 12.7em; height: 7.4em; background: #fff; border-radius: 0.8em; padding: 0.8em; display: flex; gap: 0.7em; align-items: flex-start; box-shadow: 0 0.1em 0.4em rgba(0,0,0,0.12); }
.kb-card > div, .kb-mover > div { min-width: 0; line-height: 1.25; }
.kb-card strong, .kb-mover strong { display: block; font-size: 1.05em; }
.kb-card small, .kb-mover small { display: block; color: #2e7d32; font-weight: 700; font-size: 0.95em; }
.kb-chip { display: inline-block; margin-top: 0.4em; background: #e8f5e9; color: #2e7d32; border-radius: 1em; padding: 0.1em 0.7em; font-size: 0.8em; font-weight: 600; }
.kb-card .db-av, .kb-mover .db-av { width: 2.4em; height: 2.4em; font-size: 1em; }
.kb-mover { left: 17.9em; top: 10.8em; z-index: 6; }
.kb-ghost { position: absolute; left: 17.9em; top: 10.8em; width: 12.7em; height: 7.4em; border: 0.2em dashed #b8c4b8; border-radius: 0.8em; opacity: 0; }
.kb-won { position: absolute; right: -0.9em; top: -0.9em; width: 2.4em; height: 2.4em; border-radius: 50%; background: #2e7d32; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1em; transform: scale(0); }

/* Resposta Automática e Mensagens Salvas */
.ra-body, .ms-body { flex: 1; min-height: 0; padding: 1.6em; display: grid; grid-template-columns: 1.1fr 1fr; gap: 1.4em; }
.ra-rules { display: flex; flex-direction: column; gap: 1.2em; }
.ra-rule { position: relative; flex: 1; background: #fff; border-radius: 0.9em; padding: 1em 1.2em; box-shadow: 0 0.1em 0.4em rgba(0,0,0,0.1); display: flex; flex-direction: column; justify-content: center; gap: 0.5em; }
.ra-kw { display: flex; gap: 0.5em; flex-wrap: wrap; }
.ra-kw span { background: #e8f5e9; color: #015901; border-radius: 2em; padding: 0.2em 0.9em; font-weight: 700; font-size: 1.05em; }
.ra-arrow { color: #8a8f8a; font-size: 0.9em; }
.ra-ans { background: #f4f6f4; border-radius: 0.7em; padding: 0.6em 0.9em; font-size: 1.05em; color: #444; font-style: italic; }
.ra-tag { position: absolute; right: 1em; top: 0.8em; background: #00a884; color: #fff; border-radius: 1em; padding: 0.15em 0.8em; font-size: 0.8em; font-weight: 700; opacity: 0; }
.ra-chat { display: flex; flex-direction: column; background: #efeae2; border-radius: 0.9em; overflow: hidden; box-shadow: 0 0.1em 0.4em rgba(0,0,0,0.12); min-height: 0; }
.ra-msgs { flex: 1; min-height: 0; padding: 1em; display: flex; flex-direction: column; gap: 0.7em; position: relative; }
.ra-msgs .cb-b { font-size: 1.1em; }
.ra-typing { position: absolute; left: auto; right: 1em; top: 4.2em; display: flex; gap: 0.3em; padding: 0.7em 0.9em; opacity: 0; }
.ra-typing2 { top: 12.1em; }
.ra-typing span { width: 0.6em; height: 0.6em; border-radius: 50%; background: #8696a0; }
.ms-list { min-height: 0; }
.ms-item { display: flex; align-items: center; gap: 1em; border: 1px solid #e3e8e3; border-radius: 0.8em; padding: 0.8em 1em; margin-top: 0.8em; height: 8.2em; background: #fff; }
.ms-item > div { flex: 1; min-width: 0; line-height: 1.3; }
.ms-item strong { display: block; font-size: 1.15em; }
.ms-item small { display: block; color: #6b706b; font-size: 0.95em; margin-top: 0.2em; }
.ms-send { flex: none; background: #015901; color: #fff; border-radius: 0.6em; padding: 0.45em 1em; font-weight: 700; font-size: 1em; }
.ms-chat .ra-msgs { justify-content: flex-start; }
.ms-chat .cb-b small { font-size: 0.8em; color: #53bdeb; margin-left: 0.4em; }
.ms-cursor { position: absolute; left: 27.4em; top: 22.2em; z-index: 8; font-size: 1em; color: #1d1f1e; opacity: 0; filter: drop-shadow(0 0.1em 0.1em rgba(0,0,0,0.35)); }

@media (prefers-reduced-motion: reduce) {
    .sim-panel *, .sim-panel *::before { animation: none !important; }
    .sim-panel .cb-b, .sim-panel .fn-step, .sim-panel .fn-ok { opacity: 1 !important; transform: none !important; }
    .sim-panel .kb-mover { opacity: 1; }
}

@keyframes sa-4-0_8 { 0%, 4% { opacity: 0; transform: translateY(0.8em); } 6.5%, 94% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: translateY(0.8em); } }
.scroll-visible .sim-panel .cb-msgs .cb-b:nth-child(1) { animation: sa-4-0_8 12s ease infinite; }
@keyframes sa-9-0_8 { 0%, 9% { opacity: 0; transform: translateY(0.8em); } 11.5%, 94% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: translateY(0.8em); } }
.scroll-visible .sim-panel .cb-msgs .cb-b:nth-child(2) { animation: sa-9-0_8 12s ease infinite; }
@keyframes sa-17-0_8 { 0%, 17% { opacity: 0; transform: translateY(0.8em); } 19.5%, 94% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: translateY(0.8em); } }
.scroll-visible .sim-panel .cb-msgs .cb-b:nth-child(3) { animation: sa-17-0_8 12s ease infinite; }
@keyframes sa-23-0_8 { 0%, 23% { opacity: 0; transform: translateY(0.8em); } 25.5%, 94% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: translateY(0.8em); } }
.scroll-visible .sim-panel .cb-msgs .cb-b:nth-child(4) { animation: sa-23-0_8 12s ease infinite; }
@keyframes sa-29-0_8 { 0%, 29% { opacity: 0; transform: translateY(0.8em); } 31.5%, 94% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: translateY(0.8em); } }
.scroll-visible .sim-panel .cb-msgs .cb-b:nth-child(5) { animation: sa-29-0_8 12s ease infinite; }
@keyframes sa-40-0_8 { 0%, 40% { opacity: 0; transform: translateY(0.8em); } 42.5%, 94% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: translateY(0.8em); } }
.scroll-visible .sim-panel .cb-msgs .cb-b:nth-child(6) { animation: sa-40-0_8 12s ease infinite; }
@keyframes sa-46-0_8 { 0%, 46% { opacity: 0; transform: translateY(0.8em); } 48.5%, 94% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: translateY(0.8em); } }
.scroll-visible .sim-panel .cb-msgs .cb-b:nth-child(7) { animation: sa-46-0_8 12s ease infinite; }
@keyframes sa-56--1_5 { 0%, 56% { opacity: 0; transform: translateY(-1.5em); } 58.5%, 94% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: translateY(-1.5em); } }
.scroll-visible .sim-panel .cb-toast { animation: sa-56--1_5 12s ease infinite; }
@keyframes sim-glow { 0%, 15% { box-shadow: 0 0 0 0 rgba(0,186,0,0); } 18%, 32% { box-shadow: 0 0 0 0.35em rgba(0,186,0,0.35); } 36%, 100% { box-shadow: 0 0 0 0 rgba(0,186,0,0); } }
@keyframes sim-glow-b { 0%, 38% { box-shadow: 0 0 0 0 rgba(30,111,217,0); } 41%, 56% { box-shadow: 0 0 0 0.35em rgba(30,111,217,0.35); } 60%, 100% { box-shadow: 0 0 0 0 rgba(30,111,217,0); } }
.scroll-visible .sim-panel .cb-board .cb-node:nth-child(4) { animation: sim-glow 12s ease infinite; }
.scroll-visible .sim-panel .cb-board .cb-node:nth-child(5) { animation: sim-glow-b 12s ease infinite; }
.sim-panel .cb-board, .sim-panel .cb-chat, .sim-panel .cb-toast { box-shadow: 0 0.2em 1.2em rgba(0,0,0,0.16), 0 0 0 1px rgba(0,0,0,0.08); }
@keyframes sa-6-0_8 { 0%, 6% { opacity: 0; transform: translateY(0.8em); } 8.5%, 94% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: translateY(0.8em); } }
.scroll-visible .sim-panel .fn-step:nth-child(1) { animation: sa-6-0_8 12s ease infinite; }
@keyframes fn-ok1 { 0%, 9% { opacity: 0; transform: scale(0); } 12% { opacity: 1; transform: scale(1.3); } 15%, 94% { opacity: 1; transform: scale(1); } 98%, 100% { opacity: 0; transform: scale(0); } }
.scroll-visible .sim-panel .fn-step:nth-child(1) .fn-ok { animation: fn-ok1 12s ease infinite; }
@keyframes sa-22-0_8 { 0%, 22% { opacity: 0; transform: translateY(0.8em); } 24.5%, 94% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: translateY(0.8em); } }
.scroll-visible .sim-panel .fn-step:nth-child(2) { animation: sa-22-0_8 12s ease infinite; }
@keyframes fn-ok2 { 0%, 25% { opacity: 0; transform: scale(0); } 28% { opacity: 1; transform: scale(1.3); } 31%, 94% { opacity: 1; transform: scale(1); } 98%, 100% { opacity: 0; transform: scale(0); } }
.scroll-visible .sim-panel .fn-step:nth-child(2) .fn-ok { animation: fn-ok2 12s ease infinite; }
@keyframes sa-38-0_8 { 0%, 38% { opacity: 0; transform: translateY(0.8em); } 40.5%, 94% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: translateY(0.8em); } }
.scroll-visible .sim-panel .fn-step:nth-child(3) { animation: sa-38-0_8 12s ease infinite; }
@keyframes fn-ok3 { 0%, 41% { opacity: 0; transform: scale(0); } 44% { opacity: 1; transform: scale(1.3); } 47%, 94% { opacity: 1; transform: scale(1); } 98%, 100% { opacity: 0; transform: scale(0); } }
.scroll-visible .sim-panel .fn-step:nth-child(3) .fn-ok { animation: fn-ok3 12s ease infinite; }
@keyframes sa-54-0_8 { 0%, 54% { opacity: 0; transform: translateY(0.8em); } 56.5%, 94% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: translateY(0.8em); } }
.scroll-visible .sim-panel .fn-step:nth-child(4) { animation: sa-54-0_8 12s ease infinite; }
@keyframes fn-ok4 { 0%, 57% { opacity: 0; transform: scale(0); } 60% { opacity: 1; transform: scale(1.3); } 63%, 94% { opacity: 1; transform: scale(1); } 98%, 100% { opacity: 0; transform: scale(0); } }
.scroll-visible .sim-panel .fn-step:nth-child(4) .fn-ok { animation: fn-ok4 12s ease infinite; }
@keyframes fn-fill { 0%, 8% { transform: scaleX(0); } 55%, 94% { transform: scaleX(1); } 98%, 100% { transform: scaleX(0); } }
.scroll-visible .sim-panel .fn-bar i { animation: fn-fill 12s ease infinite; }
@keyframes kb-move { 0% { opacity: 0; transform: translate(0, 0); }
 3%, 18% { opacity: 1; transform: translate(0, 0) scale(1); }
 22% { transform: translate(0, 0) scale(1.06); box-shadow: 0 0.8em 1.6em rgba(0,0,0,0.25); }
 30% { transform: translate(15.5em, 8.4em) scale(1.06); box-shadow: 0 0.8em 1.6em rgba(0,0,0,0.25); }
 34%, 52% { transform: translate(15.5em, 8.4em) scale(1); box-shadow: 0 0.1em 0.4em rgba(0,0,0,0.12); }
 56% { transform: translate(15.5em, 8.4em) scale(1.06); box-shadow: 0 0.8em 1.6em rgba(0,0,0,0.25); }
 64% { transform: translate(31em, 8.4em) scale(1.06); box-shadow: 0 0.8em 1.6em rgba(0,0,0,0.25); }
 68%, 94% { opacity: 1; transform: translate(31em, 8.4em) scale(1); box-shadow: 0 0 0 0.25em rgba(46,125,50,0.45); }
 98% { opacity: 0; transform: translate(31em, 8.4em) scale(1); }
 100% { opacity: 0; transform: translate(0, 0); } }
.scroll-visible .sim-panel .kb-mover { animation: kb-move 12s ease-in-out infinite; }
@keyframes kb-ghost { 0%, 21% { opacity: 0; } 24%, 94% { opacity: 1; } 98%, 100% { opacity: 0; } }
.scroll-visible .sim-panel .kb-ghost { animation: kb-ghost 12s ease infinite; }
@keyframes kb-won { 0%, 64% { transform: scale(0); } 69% { transform: scale(1.3); } 73%, 94% { transform: scale(1); } 98%, 100% { transform: scale(0); } }
.scroll-visible .sim-panel .kb-won { animation: kb-won 12s ease infinite; }
@keyframes kb-t1 { 0%, 64% { opacity: 1; } 67%, 94% { opacity: 0; } 98%, 100% { opacity: 1; } }
@keyframes kb-t2 { 0%, 64% { opacity: 0; } 67%, 94% { opacity: 1; } 98%, 100% { opacity: 0; } }
.scroll-visible .sim-panel .kb-t1 { animation: kb-t1 12s ease infinite; }
.scroll-visible .sim-panel .kb-t2 { animation: kb-t2 12s ease infinite; }
@keyframes sa-8-0_8 { 0%, 8% { opacity: 0; transform: translateY(0.8em); } 10.5%, 94% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: translateY(0.8em); } }
.scroll-visible .sim-panel .ra-m1 { animation: sa-8-0_8 12s ease infinite; }
.scroll-visible .sim-panel .ra-m2 { animation: sa-22-0_8 12s ease infinite; }
.scroll-visible .sim-panel .ra-m3 { animation: sa-46-0_8 12s ease infinite; }
@keyframes sa-60-0_8 { 0%, 60% { opacity: 0; transform: translateY(0.8em); } 62.5%, 94% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: translateY(0.8em); } }
.scroll-visible .sim-panel .ra-m4 { animation: sa-60-0_8 12s ease infinite; }
@keyframes ra-typing { 0%, 14% { opacity: 0; } 16%, 21% { opacity: 1; } 22%, 100% { opacity: 0; } }
@keyframes ra-typing2 { 0%, 52% { opacity: 0; } 54%, 59% { opacity: 1; } 60%, 100% { opacity: 0; } }
.scroll-visible .sim-panel .ra-typing2 { animation: ra-typing2 12s ease infinite; }
.scroll-visible .sim-panel .ra-typing { animation: ra-typing 12s ease infinite; }
@keyframes ra-flash1 { 0%, 8% { box-shadow: 0 0 0 0 rgba(0,186,0,0); background: #fff; } 11%, 26% { box-shadow: 0 0 0 0.3em rgba(0,186,0,0.35); background: #f1fbf1; } 30%, 100% { box-shadow: 0 0 0 0 rgba(0,186,0,0); background: #fff; } }
@keyframes ra-flash2 { 0%, 46% { box-shadow: 0 0 0 0 rgba(0,186,0,0); background: #fff; } 49%, 64% { box-shadow: 0 0 0 0.3em rgba(0,186,0,0.35); background: #f1fbf1; } 68%, 100% { box-shadow: 0 0 0 0 rgba(0,186,0,0); background: #fff; } }
.scroll-visible .sim-panel .ra-r1 { animation: ra-flash1 12s ease infinite; }
.scroll-visible .sim-panel .ra-r2 { animation: ra-flash2 12s ease infinite; }
@keyframes ra-tag1 { 0%, 10% { opacity: 0; } 13%, 26% { opacity: 1; } 30%, 100% { opacity: 0; } }
@keyframes ra-tag2 { 0%, 48% { opacity: 0; } 51%, 64% { opacity: 1; } 68%, 100% { opacity: 0; } }
.scroll-visible .sim-panel .ra-r1 .ra-tag { animation: ra-tag1 12s ease infinite; }
.scroll-visible .sim-panel .ra-r2 .ra-tag { animation: ra-tag2 12s ease infinite; }
.scroll-visible .sim-panel .ms-m0 { animation: sa-4-0_8 12s ease infinite; }
@keyframes sa-27-0_8 { 0%, 27% { opacity: 0; transform: translateY(0.8em); } 29.5%, 94% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: translateY(0.8em); } }
.scroll-visible .sim-panel .ms-m1 { animation: sa-27-0_8 12s ease infinite; }
@keyframes sa-42-0_8 { 0%, 42% { opacity: 0; transform: translateY(0.8em); } 44.5%, 94% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: translateY(0.8em); } }
.scroll-visible .sim-panel .ms-m2 { animation: sa-42-0_8 12s ease infinite; }
@keyframes sa-63-0_8 { 0%, 63% { opacity: 0; transform: translateY(0.8em); } 65.5%, 94% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: translateY(0.8em); } }
.scroll-visible .sim-panel .ms-m3 { animation: sa-63-0_8 12s ease infinite; }
@keyframes ms-cursor { 0% { transform: translate(8em, 8em); opacity: 0; }
 4% { transform: translate(8em, 8em); opacity: 1; }
 16% { transform: translate(0, 0) scale(1); }
 19% { transform: translate(0, 0) scale(0.8); }
 22% { transform: translate(0, 0) scale(1); }
 40%, 46% { transform: translate(0, 9em) scale(1); }
 52% { transform: translate(0, 9em) scale(0.8); }
 55% { transform: translate(0, 9em) scale(1); }
 76% { transform: translate(8em, 14em); opacity: 1; }
 82%, 100% { transform: translate(8em, 14em); opacity: 0; } }
.scroll-visible .sim-panel .ms-cursor { animation: ms-cursor 12s ease-in-out infinite; }
@keyframes ms-hl1 { 0%, 18% { background: #fff; border-color: #e3e8e3; } 20%, 38% { background: #e8f5e9; border-color: #00a884; } 42%, 100% { background: #fff; border-color: #e3e8e3; } }
@keyframes ms-hl2 { 0%, 51% { background: #fff; border-color: #e3e8e3; } 53%, 70% { background: #e8f5e9; border-color: #00a884; } 74%, 100% { background: #fff; border-color: #e3e8e3; } }
.scroll-visible .sim-panel .ms-i1 { animation: ms-hl1 12s ease infinite; }
.scroll-visible .sim-panel .ms-i2 { animation: ms-hl2 12s ease infinite; }

.ms-cursor i { font-size: 2.4em; }

/* ===== Simulações do segundo lote ===== */
/* status (na fila -> enviado) */
.st { position: relative; display: inline-block; width: 8em; height: 2em; flex: none; }
.st span { position: absolute; left: 0; top: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; gap: 0.4em; border-radius: 2em; font-size: 0.95em; font-weight: 700; }
.st-a { background: #eef1ee; color: #6b706b; }
.st-b { background: #00a884; color: #fff; opacity: 0; }
.mk-btn { margin-top: auto; background: #015901; color: #fff; text-align: center; border-radius: 0.7em; padding: 0.7em 1em; font-weight: 700; font-size: 1.15em; }
.mk-btn i { margin-right: 0.5em; }

/* Painel de Controle */
.pc-grid { flex: 1; min-height: 0; padding: 1.8em; display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(3, 1fr); gap: 1.3em; }
.pc-card { background: #fff; border: 1px solid #dfe5df; border-radius: 0.9em; box-shadow: 0 0.1em 0.4em rgba(0,0,0,0.08); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.7em; padding: 0.6em; text-align: center; }
.pc-card i { font-size: 3em; color: #015901; }
.pc-card span { font-size: 1.15em; font-weight: 600; color: #333; line-height: 1.2; }

/* Marcador */
.mk-body, .cl-body, .eg-body, .ep-body, .sc-body { flex: 1; min-height: 0; padding: 1.6em; display: grid; grid-template-columns: 1fr 1.1fr; gap: 1.4em; }
.mk-left, .cl-left, .eg-left, .ep-form, .sc-left { min-height: 0; }
.mk-g { border: 1px solid #e3e8e3; border-radius: 0.8em; padding: 0.8em 1em; margin-bottom: 0.8em; background: #fff; }
.mk-g strong { display: block; font-size: 1.15em; }
.mk-g small { color: #6b706b; font-size: 0.95em; }
.mk-msg { max-width: 92%; font-size: 1.1em; }
.mk-mentions { margin-top: 0.6em; display: flex; flex-wrap: wrap; gap: 0.4em; }
.mk-m { background: #cfe9ff; color: #0b57d0; border-radius: 0.5em; padding: 0.1em 0.6em; font-weight: 700; font-size: 0.95em; }
.mk-msg small { display: block; text-align: right; color: #53bdeb; font-size: 0.85em; }

/* Coletor */
.cl-g { display: flex; align-items: center; gap: 0.9em; border: 1px solid #e3e8e3; border-radius: 0.8em; padding: 0.8em 1em; margin-bottom: 0.8em; background: #fff; }
.cl-g strong { display: block; font-size: 1.15em; }
.cl-g small { color: #6b706b; font-size: 0.95em; }
.cl-cb { flex: none; width: 2em; height: 2em; border: 0.15em solid #b9c4b9; border-radius: 0.4em; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 0.9em; background: #fff; }
.cl-cb i { opacity: 0; }
.cl-g:nth-child(1) .cl-cb, .cl-g:nth-child(4) .cl-cb { border-color: #b9c4b9; }
.cl-right { position: relative; }
.cl-count { position: relative; display: inline-block; min-width: 14em; font-size: 0.75em; font-weight: 600; color: #6b706b; margin-left: 0.6em; }
.cl-count span { position: absolute; left: 0; top: 0; white-space: nowrap; }
.cl-c2 { opacity: 0; color: #2e7d32; }
.cl-r { display: grid; grid-template-columns: 1.1fr 1.3fr 1fr; gap: 0.8em; padding: 0.65em 0; border-top: 1px solid #eef0ee; font-size: 1.05em; }
.cl-th { font-weight: 700; color: #015901; border-top: 0; }
.cl-csv { position: absolute; right: 1.2em; bottom: 1.2em; background: #e8f5e9; color: #015901; border-radius: 0.7em; padding: 0.6em 1.2em; font-weight: 700; font-size: 1.1em; }
.cl-csv i { margin-right: 0.5em; }

/* Envios em Grupos e Envios Automáticos */
.eg-bubble { align-self: flex-start; margin-bottom: 1em; font-size: 1.1em; max-width: 100%; }
.eg-img { display: flex; align-items: center; gap: 0.8em; background: #eef3ee; border-radius: 0.8em; padding: 1.4em 1em; color: #015901; font-weight: 600; margin-bottom: 1em; }
.eg-img i { font-size: 2em; }
.eg-opt { margin-top: auto; background: #f4f6f4; border-radius: 0.7em; padding: 0.7em 1em; color: #444; }
.eg-left { display: flex; flex-direction: column; }
.eg-right, .ea-list { display: flex; flex-direction: column; min-height: 0; }
.eg-prog { margin: 0 0 0.6em; height: 0.8em; }
.eg-r { display: flex; align-items: center; gap: 0.9em; padding: 0.75em 0; border-top: 1px solid #eef0ee; }
.eg-r strong, .ea-c { flex: 1; min-width: 0; line-height: 1.25; }
.eg-r > strong { font-size: 1.1em; }
.ea-c strong { display: block; font-size: 1.1em; }
.ea-c small { color: #6b706b; font-size: 0.95em; }
.eg-n { flex: none; width: 2em; height: 2em; border-radius: 50%; background: #e8f5e9; color: #015901; font-weight: 700; display: flex; align-items: center; justify-content: center; font-size: 0.95em; }
.ea-body { flex: 1; min-height: 0; padding: 1.6em; display: flex; flex-direction: column; gap: 1.2em; }
.ea-list { flex: 1; }
.ea-body .db-tile .fn-bar { margin-top: 0.5em; }

/* Envio Programado */
.ep-body { grid-template-columns: 1fr 1.05fr; }
.ep-form { display: flex; flex-direction: column; }
.ep-f { margin-bottom: 0.9em; }
.ep-f small { display: block; color: #6b706b; font-weight: 600; margin-bottom: 0.3em; font-size: 0.95em; }
.ep-v { border: 1px solid #cfd8cf; border-radius: 0.6em; padding: 0.6em 0.9em; background: #fff; font-size: 1.05em; min-height: 2.9em; }
.ep-tall { min-height: 5.2em; }
.ep-v span { display: inline-block; }
.ep-list { min-height: 0; }
.ep-r { display: flex; align-items: center; gap: 0.9em; padding: 0.8em 0.4em; border-top: 1px solid #eef0ee; }
.ep-r > div { flex: 1; min-width: 0; line-height: 1.25; }
.ep-r strong { display: block; font-size: 1.1em; }
.ep-r small { color: #6b706b; font-size: 0.95em; }
.ep-when { flex: none; width: 7.2em; background: #fff4de; color: #b26a00; border-radius: 0.6em; padding: 0.35em 0.6em; font-weight: 700; font-size: 0.95em; text-align: center; }
.ep-new { background: #e8f5e9; border-radius: 0.7em; border-top-color: transparent; }
.ep-new .ep-when { background: #c8e6c9; color: #1b5e20; }

/* Scripts */
.sc-s { display: flex; align-items: center; gap: 0.9em; border: 1px solid #e3e8e3; border-radius: 0.8em; padding: 0.7em 1em; margin-top: 0.75em; background: #fff; }
.sc-s .fn-n { flex: none; width: 2.4em; height: 2.4em; font-size: 0.95em; }
.sc-s > i { flex: none; color: #015901; font-size: 1.4em; width: 1.4em; text-align: center; }
.sc-s > div { flex: 1; min-width: 0; line-height: 1.25; }
.sc-s strong { display: block; font-size: 1.1em; }
.sc-s small { color: #6b706b; font-size: 0.95em; }
.sc-s .fn-when { grid-area: auto; flex: none; }
.sc-chat .ra-msgs { gap: 0.6em; }
.sc-img { margin: 0; padding: 0.9em 0.8em; background: #fff; min-width: 13em; }

@media (prefers-reduced-motion: reduce) {
    .sim-panel .pc-card, .sim-panel .st-b, .sim-panel .cl-r { opacity: 1 !important; transform: none !important; }
    .sim-panel .st-a { opacity: 0; }
    .sim-panel .cl-cb i { opacity: 1; }
}

@keyframes s2a-2_0-2_5-0_8em-0_8 { 0%, 2.0% { opacity: 0; transform: scale(0.8); } 4.5%, 94% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: scale(0.8); } }
.scroll-visible .sim-panel .pc-card:nth-child(1) { animation: s2a-2_0-2_5-0_8em-0_8 12s ease infinite; }
@keyframes s2w-40_0-42_2-3974 { 0%, 40.0% { box-shadow: 0 0.1em 0.4em rgba(0,0,0,0.08); border-color: #dfe5df; background: #fff; } 42.0%, 42.2% { box-shadow: 0 0 0 0.3em rgba(0,186,0,0.35); border-color: #00a884; background: #f1fbf1; } 45.2%, 100% { box-shadow: 0 0.1em 0.4em rgba(0,0,0,0.08); border-color: #dfe5df; background: #fff; } }
.scroll-visible .sim-panel .pc-card:nth-child(1) { animation: s2w-40_0-42_2-3974 12s ease infinite; }
@keyframes s2ic0 { 0%, 40.0% { transform: scale(1); } 42.0%, 42.2% { transform: scale(1.25); } 45.0%, 100% { transform: scale(1); } }
.scroll-visible .sim-panel .pc-card:nth-child(1) i { animation: s2ic0 12s ease infinite; }
@keyframes s2a-3_4-2_5-0_8em-0_8 { 0%, 3.4% { opacity: 0; transform: scale(0.8); } 5.9%, 94% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: scale(0.8); } }
.scroll-visible .sim-panel .pc-card:nth-child(2) { animation: s2a-3_4-2_5-0_8em-0_8 12s ease infinite; }
@keyframes s2w-43_6-45_8-3974 { 0%, 43.6% { box-shadow: 0 0.1em 0.4em rgba(0,0,0,0.08); border-color: #dfe5df; background: #fff; } 45.6%, 45.8% { box-shadow: 0 0 0 0.3em rgba(0,186,0,0.35); border-color: #00a884; background: #f1fbf1; } 48.8%, 100% { box-shadow: 0 0.1em 0.4em rgba(0,0,0,0.08); border-color: #dfe5df; background: #fff; } }
.scroll-visible .sim-panel .pc-card:nth-child(2) { animation: s2w-43_6-45_8-3974 12s ease infinite; }
@keyframes s2ic1 { 0%, 43.6% { transform: scale(1); } 45.6%, 45.800000000000004% { transform: scale(1.25); } 48.6%, 100% { transform: scale(1); } }
.scroll-visible .sim-panel .pc-card:nth-child(2) i { animation: s2ic1 12s ease infinite; }
@keyframes s2a-4_8-2_5-0_8em-0_8 { 0%, 4.8% { opacity: 0; transform: scale(0.8); } 7.3%, 94% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: scale(0.8); } }
.scroll-visible .sim-panel .pc-card:nth-child(3) { animation: s2a-4_8-2_5-0_8em-0_8 12s ease infinite; }
@keyframes s2w-47_2-49_4-3974 { 0%, 47.2% { box-shadow: 0 0.1em 0.4em rgba(0,0,0,0.08); border-color: #dfe5df; background: #fff; } 49.2%, 49.4% { box-shadow: 0 0 0 0.3em rgba(0,186,0,0.35); border-color: #00a884; background: #f1fbf1; } 52.4%, 100% { box-shadow: 0 0.1em 0.4em rgba(0,0,0,0.08); border-color: #dfe5df; background: #fff; } }
.scroll-visible .sim-panel .pc-card:nth-child(3) { animation: s2w-47_2-49_4-3974 12s ease infinite; }
@keyframes s2ic2 { 0%, 47.2% { transform: scale(1); } 49.2%, 49.400000000000006% { transform: scale(1.25); } 52.2%, 100% { transform: scale(1); } }
.scroll-visible .sim-panel .pc-card:nth-child(3) i { animation: s2ic2 12s ease infinite; }
@keyframes s2a-6_2-2_5-0_8em-0_8 { 0%, 6.2% { opacity: 0; transform: scale(0.8); } 8.7%, 94% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: scale(0.8); } }
.scroll-visible .sim-panel .pc-card:nth-child(4) { animation: s2a-6_2-2_5-0_8em-0_8 12s ease infinite; }
@keyframes s2w-50_8-53_0-3974 { 0%, 50.8% { box-shadow: 0 0.1em 0.4em rgba(0,0,0,0.08); border-color: #dfe5df; background: #fff; } 52.8%, 53.0% { box-shadow: 0 0 0 0.3em rgba(0,186,0,0.35); border-color: #00a884; background: #f1fbf1; } 56.0%, 100% { box-shadow: 0 0.1em 0.4em rgba(0,0,0,0.08); border-color: #dfe5df; background: #fff; } }
.scroll-visible .sim-panel .pc-card:nth-child(4) { animation: s2w-50_8-53_0-3974 12s ease infinite; }
@keyframes s2ic3 { 0%, 50.8% { transform: scale(1); } 52.8%, 53.0% { transform: scale(1.25); } 55.8%, 100% { transform: scale(1); } }
.scroll-visible .sim-panel .pc-card:nth-child(4) i { animation: s2ic3 12s ease infinite; }
@keyframes s2a-7_6-2_5-0_8em-0_8 { 0%, 7.6% { opacity: 0; transform: scale(0.8); } 10.1%, 94% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: scale(0.8); } }
.scroll-visible .sim-panel .pc-card:nth-child(5) { animation: s2a-7_6-2_5-0_8em-0_8 12s ease infinite; }
@keyframes s2w-54_4-56_6-3974 { 0%, 54.4% { box-shadow: 0 0.1em 0.4em rgba(0,0,0,0.08); border-color: #dfe5df; background: #fff; } 56.4%, 56.6% { box-shadow: 0 0 0 0.3em rgba(0,186,0,0.35); border-color: #00a884; background: #f1fbf1; } 59.6%, 100% { box-shadow: 0 0.1em 0.4em rgba(0,0,0,0.08); border-color: #dfe5df; background: #fff; } }
.scroll-visible .sim-panel .pc-card:nth-child(5) { animation: s2w-54_4-56_6-3974 12s ease infinite; }
@keyframes s2ic4 { 0%, 54.4% { transform: scale(1); } 56.4%, 56.6% { transform: scale(1.25); } 59.4%, 100% { transform: scale(1); } }
.scroll-visible .sim-panel .pc-card:nth-child(5) i { animation: s2ic4 12s ease infinite; }
@keyframes s2a-9_0-2_5-0_8em-0_8 { 0%, 9.0% { opacity: 0; transform: scale(0.8); } 11.5%, 94% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: scale(0.8); } }
.scroll-visible .sim-panel .pc-card:nth-child(6) { animation: s2a-9_0-2_5-0_8em-0_8 12s ease infinite; }
@keyframes s2w-58_0-60_2-3974 { 0%, 58.0% { box-shadow: 0 0.1em 0.4em rgba(0,0,0,0.08); border-color: #dfe5df; background: #fff; } 60.0%, 60.2% { box-shadow: 0 0 0 0.3em rgba(0,186,0,0.35); border-color: #00a884; background: #f1fbf1; } 63.2%, 100% { box-shadow: 0 0.1em 0.4em rgba(0,0,0,0.08); border-color: #dfe5df; background: #fff; } }
.scroll-visible .sim-panel .pc-card:nth-child(6) { animation: s2w-58_0-60_2-3974 12s ease infinite; }
@keyframes s2ic5 { 0%, 58.0% { transform: scale(1); } 60.0%, 60.2% { transform: scale(1.25); } 63.0%, 100% { transform: scale(1); } }
.scroll-visible .sim-panel .pc-card:nth-child(6) i { animation: s2ic5 12s ease infinite; }
@keyframes s2a-10_4-2_5-0_8em-0_8 { 0%, 10.4% { opacity: 0; transform: scale(0.8); } 12.9%, 94% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: scale(0.8); } }
.scroll-visible .sim-panel .pc-card:nth-child(7) { animation: s2a-10_4-2_5-0_8em-0_8 12s ease infinite; }
@keyframes s2w-61_6-63_8-3974 { 0%, 61.6% { box-shadow: 0 0.1em 0.4em rgba(0,0,0,0.08); border-color: #dfe5df; background: #fff; } 63.6%, 63.8% { box-shadow: 0 0 0 0.3em rgba(0,186,0,0.35); border-color: #00a884; background: #f1fbf1; } 66.8%, 100% { box-shadow: 0 0.1em 0.4em rgba(0,0,0,0.08); border-color: #dfe5df; background: #fff; } }
.scroll-visible .sim-panel .pc-card:nth-child(7) { animation: s2w-61_6-63_8-3974 12s ease infinite; }
@keyframes s2ic6 { 0%, 61.6% { transform: scale(1); } 63.6%, 63.800000000000004% { transform: scale(1.25); } 66.6%, 100% { transform: scale(1); } }
.scroll-visible .sim-panel .pc-card:nth-child(7) i { animation: s2ic6 12s ease infinite; }
@keyframes s2a-11_8-2_5-0_8em-0_8 { 0%, 11.8% { opacity: 0; transform: scale(0.8); } 14.3%, 94% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: scale(0.8); } }
.scroll-visible .sim-panel .pc-card:nth-child(8) { animation: s2a-11_8-2_5-0_8em-0_8 12s ease infinite; }
@keyframes s2w-65_2-67_4-3974 { 0%, 65.2% { box-shadow: 0 0.1em 0.4em rgba(0,0,0,0.08); border-color: #dfe5df; background: #fff; } 67.2%, 67.4% { box-shadow: 0 0 0 0.3em rgba(0,186,0,0.35); border-color: #00a884; background: #f1fbf1; } 70.4%, 100% { box-shadow: 0 0.1em 0.4em rgba(0,0,0,0.08); border-color: #dfe5df; background: #fff; } }
.scroll-visible .sim-panel .pc-card:nth-child(8) { animation: s2w-65_2-67_4-3974 12s ease infinite; }
@keyframes s2ic7 { 0%, 65.2% { transform: scale(1); } 67.2%, 67.4% { transform: scale(1.25); } 70.2%, 100% { transform: scale(1); } }
.scroll-visible .sim-panel .pc-card:nth-child(8) i { animation: s2ic7 12s ease infinite; }
@keyframes s2a-13_2-2_5-0_8em-0_8 { 0%, 13.2% { opacity: 0; transform: scale(0.8); } 15.7%, 94% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: scale(0.8); } }
.scroll-visible .sim-panel .pc-card:nth-child(9) { animation: s2a-13_2-2_5-0_8em-0_8 12s ease infinite; }
@keyframes s2w-68_8-71_0-3974 { 0%, 68.8% { box-shadow: 0 0.1em 0.4em rgba(0,0,0,0.08); border-color: #dfe5df; background: #fff; } 70.8%, 71.0% { box-shadow: 0 0 0 0.3em rgba(0,186,0,0.35); border-color: #00a884; background: #f1fbf1; } 74.0%, 100% { box-shadow: 0 0.1em 0.4em rgba(0,0,0,0.08); border-color: #dfe5df; background: #fff; } }
.scroll-visible .sim-panel .pc-card:nth-child(9) { animation: s2w-68_8-71_0-3974 12s ease infinite; }
@keyframes s2ic8 { 0%, 68.8% { transform: scale(1); } 70.8%, 71.0% { transform: scale(1.25); } 73.8%, 100% { transform: scale(1); } }
.scroll-visible .sim-panel .pc-card:nth-child(9) i { animation: s2ic8 12s ease infinite; }
@keyframes s2a-14_6-2_5-0_8em-0_8 { 0%, 14.6% { opacity: 0; transform: scale(0.8); } 17.1%, 94% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: scale(0.8); } }
.scroll-visible .sim-panel .pc-card:nth-child(10) { animation: s2a-14_6-2_5-0_8em-0_8 12s ease infinite; }
@keyframes s2w-72_4-74_6-3974 { 0%, 72.4% { box-shadow: 0 0.1em 0.4em rgba(0,0,0,0.08); border-color: #dfe5df; background: #fff; } 74.4%, 74.6% { box-shadow: 0 0 0 0.3em rgba(0,186,0,0.35); border-color: #00a884; background: #f1fbf1; } 77.6%, 100% { box-shadow: 0 0.1em 0.4em rgba(0,0,0,0.08); border-color: #dfe5df; background: #fff; } }
.scroll-visible .sim-panel .pc-card:nth-child(10) { animation: s2w-72_4-74_6-3974 12s ease infinite; }
@keyframes s2ic9 { 0%, 72.4% { transform: scale(1); } 74.4%, 74.60000000000001% { transform: scale(1.25); } 77.4%, 100% { transform: scale(1); } }
.scroll-visible .sim-panel .pc-card:nth-child(10) i { animation: s2ic9 12s ease infinite; }
@keyframes s2a-16_0-2_5-0_8em-0_8 { 0%, 16.0% { opacity: 0; transform: scale(0.8); } 18.5%, 94% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: scale(0.8); } }
.scroll-visible .sim-panel .pc-card:nth-child(11) { animation: s2a-16_0-2_5-0_8em-0_8 12s ease infinite; }
@keyframes s2w-76_0-78_2-3974 { 0%, 76.0% { box-shadow: 0 0.1em 0.4em rgba(0,0,0,0.08); border-color: #dfe5df; background: #fff; } 78.0%, 78.2% { box-shadow: 0 0 0 0.3em rgba(0,186,0,0.35); border-color: #00a884; background: #f1fbf1; } 81.2%, 100% { box-shadow: 0 0.1em 0.4em rgba(0,0,0,0.08); border-color: #dfe5df; background: #fff; } }
.scroll-visible .sim-panel .pc-card:nth-child(11) { animation: s2w-76_0-78_2-3974 12s ease infinite; }
@keyframes s2ic10 { 0%, 76.0% { transform: scale(1); } 78.0%, 78.2% { transform: scale(1.25); } 81.0%, 100% { transform: scale(1); } }
.scroll-visible .sim-panel .pc-card:nth-child(11) i { animation: s2ic10 12s ease infinite; }
@keyframes s2a-17_4-2_5-0_8em-0_8 { 0%, 17.4% { opacity: 0; transform: scale(0.8); } 19.9%, 94% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: scale(0.8); } }
.scroll-visible .sim-panel .pc-card:nth-child(12) { animation: s2a-17_4-2_5-0_8em-0_8 12s ease infinite; }
@keyframes s2w-79_6-81_8-3974 { 0%, 79.6% { box-shadow: 0 0.1em 0.4em rgba(0,0,0,0.08); border-color: #dfe5df; background: #fff; } 81.6%, 81.8% { box-shadow: 0 0 0 0.3em rgba(0,186,0,0.35); border-color: #00a884; background: #f1fbf1; } 84.8%, 100% { box-shadow: 0 0.1em 0.4em rgba(0,0,0,0.08); border-color: #dfe5df; background: #fff; } }
.scroll-visible .sim-panel .pc-card:nth-child(12) { animation: s2w-79_6-81_8-3974 12s ease infinite; }
@keyframes s2ic11 { 0%, 79.6% { transform: scale(1); } 81.6%, 81.8% { transform: scale(1.25); } 84.6%, 100% { transform: scale(1); } }
.scroll-visible .sim-panel .pc-card:nth-child(12) i { animation: s2ic11 12s ease infinite; }
@keyframes s2a-18_8-2_5-0_8em-0_8 { 0%, 18.8% { opacity: 0; transform: scale(0.8); } 21.3%, 94% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: scale(0.8); } }
.scroll-visible .sim-panel .pc-card:nth-child(13) { animation: s2a-18_8-2_5-0_8em-0_8 12s ease infinite; }
@keyframes s2w-83_2-85_4-3974 { 0%, 83.2% { box-shadow: 0 0.1em 0.4em rgba(0,0,0,0.08); border-color: #dfe5df; background: #fff; } 85.2%, 85.4% { box-shadow: 0 0 0 0.3em rgba(0,186,0,0.35); border-color: #00a884; background: #f1fbf1; } 88.4%, 100% { box-shadow: 0 0.1em 0.4em rgba(0,0,0,0.08); border-color: #dfe5df; background: #fff; } }
.scroll-visible .sim-panel .pc-card:nth-child(13) { animation: s2w-83_2-85_4-3974 12s ease infinite; }
@keyframes s2ic12 { 0%, 83.2% { transform: scale(1); } 85.2%, 85.4% { transform: scale(1.25); } 88.2%, 100% { transform: scale(1); } }
.scroll-visible .sim-panel .pc-card:nth-child(13) i { animation: s2ic12 12s ease infinite; }
@keyframes s2a-20_2-2_5-0_8em-0_8 { 0%, 20.2% { opacity: 0; transform: scale(0.8); } 22.7%, 94% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: scale(0.8); } }
.scroll-visible .sim-panel .pc-card:nth-child(14) { animation: s2a-20_2-2_5-0_8em-0_8 12s ease infinite; }
@keyframes s2w-86_8-89_0-3974 { 0%, 86.8% { box-shadow: 0 0.1em 0.4em rgba(0,0,0,0.08); border-color: #dfe5df; background: #fff; } 88.8%, 89.0% { box-shadow: 0 0 0 0.3em rgba(0,186,0,0.35); border-color: #00a884; background: #f1fbf1; } 92.0%, 100% { box-shadow: 0 0.1em 0.4em rgba(0,0,0,0.08); border-color: #dfe5df; background: #fff; } }
.scroll-visible .sim-panel .pc-card:nth-child(14) { animation: s2w-86_8-89_0-3974 12s ease infinite; }
@keyframes s2ic13 { 0%, 86.8% { transform: scale(1); } 88.8%, 89.0% { transform: scale(1.25); } 91.8%, 100% { transform: scale(1); } }
.scroll-visible .sim-panel .pc-card:nth-child(14) i { animation: s2ic13 12s ease infinite; }
/* painel: entrada + destaque juntos */
.scroll-visible .sim-panel .pc-card:nth-child(1) { animation: s2a-2_0-2_5-0_8em-0_8 12s ease infinite, s2w-40_0-42_2-3974 12s ease infinite; }
.scroll-visible .sim-panel .pc-card:nth-child(2) { animation: s2a-3_4-2_5-0_8em-0_8 12s ease infinite, s2w-43_6-45_8-3974 12s ease infinite; }
.scroll-visible .sim-panel .pc-card:nth-child(3) { animation: s2a-4_8-2_5-0_8em-0_8 12s ease infinite, s2w-47_2-49_4-3974 12s ease infinite; }
.scroll-visible .sim-panel .pc-card:nth-child(4) { animation: s2a-6_2-2_5-0_8em-0_8 12s ease infinite, s2w-50_8-53_0-3974 12s ease infinite; }
.scroll-visible .sim-panel .pc-card:nth-child(5) { animation: s2a-7_6-2_5-0_8em-0_8 12s ease infinite, s2w-54_4-56_6-3974 12s ease infinite; }
.scroll-visible .sim-panel .pc-card:nth-child(6) { animation: s2a-9_0-2_5-0_8em-0_8 12s ease infinite, s2w-58_0-60_2-3974 12s ease infinite; }
.scroll-visible .sim-panel .pc-card:nth-child(7) { animation: s2a-10_4-2_5-0_8em-0_8 12s ease infinite, s2w-61_6-63_8-3974 12s ease infinite; }
.scroll-visible .sim-panel .pc-card:nth-child(8) { animation: s2a-11_8-2_5-0_8em-0_8 12s ease infinite, s2w-65_2-67_4-3974 12s ease infinite; }
.scroll-visible .sim-panel .pc-card:nth-child(9) { animation: s2a-13_2-2_5-0_8em-0_8 12s ease infinite, s2w-68_8-71_0-3974 12s ease infinite; }
.scroll-visible .sim-panel .pc-card:nth-child(10) { animation: s2a-14_6-2_5-0_8em-0_8 12s ease infinite, s2w-72_4-74_6-3974 12s ease infinite; }
.scroll-visible .sim-panel .pc-card:nth-child(11) { animation: s2a-16_0-2_5-0_8em-0_8 12s ease infinite, s2w-76_0-78_2-3974 12s ease infinite; }
.scroll-visible .sim-panel .pc-card:nth-child(12) { animation: s2a-17_4-2_5-0_8em-0_8 12s ease infinite, s2w-79_6-81_8-3974 12s ease infinite; }
.scroll-visible .sim-panel .pc-card:nth-child(13) { animation: s2a-18_8-2_5-0_8em-0_8 12s ease infinite, s2w-83_2-85_4-3974 12s ease infinite; }
.scroll-visible .sim-panel .pc-card:nth-child(14) { animation: s2a-20_2-2_5-0_8em-0_8 12s ease infinite, s2w-86_8-89_0-3974 12s ease infinite; }
@keyframes s2w-8-40-742 { 0%, 8% { border-color: #e3e8e3; background: #fff; } 10%, 40% { border-color: #00a884; background: #e8f5e9; } 43%, 100% { border-color: #e3e8e3; background: #fff; } }
.scroll-visible .sim-panel .mk-g:nth-child(3) { animation: s2w-8-40-742 12s ease infinite; }
@keyframes s2p-42 { 0%, 42% { transform: scale(1); filter: none; } 44% { transform: scale(0.88); filter: brightness(1.25); } 47%, 100% { transform: scale(1); filter: none; } }
.scroll-visible .sim-panel .mk-btn { animation: s2p-42 12s ease infinite; }
@keyframes s2a-48-3-0_8em-None { 0%, 48% { opacity: 0; transform: translateY(0.8em); } 51%, 94% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: translateY(0.8em); } }
.scroll-visible .sim-panel .mk-msg { animation: s2a-48-3-0_8em-None 12s ease infinite; }
@keyframes s2a-54-2-0_8em-0_6 { 0%, 54% { opacity: 0; transform: scale(0.6); } 56%, 94% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: scale(0.6); } }
.scroll-visible .sim-panel .mk-m:nth-child(1) { animation: s2a-54-2-0_8em-0_6 12s ease infinite; }
@keyframes s2a-57-2-0_8em-0_6 { 0%, 57% { opacity: 0; transform: scale(0.6); } 59%, 94% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: scale(0.6); } }
.scroll-visible .sim-panel .mk-m:nth-child(2) { animation: s2a-57-2-0_8em-0_6 12s ease infinite; }
@keyframes s2a-60-2-0_8em-0_6 { 0%, 60% { opacity: 0; transform: scale(0.6); } 62%, 94% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: scale(0.6); } }
.scroll-visible .sim-panel .mk-m:nth-child(3) { animation: s2a-60-2-0_8em-0_6 12s ease infinite; }
@keyframes s2a-63-2-0_8em-0_6 { 0%, 63% { opacity: 0; transform: scale(0.6); } 65%, 94% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: scale(0.6); } }
.scroll-visible .sim-panel .mk-m:nth-child(4) { animation: s2a-63-2-0_8em-0_6 12s ease infinite; }
@keyframes s2a-66-2-0_8em-0_6 { 0%, 66% { opacity: 0; transform: scale(0.6); } 68%, 94% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: scale(0.6); } }
.scroll-visible .sim-panel .mk-m:nth-child(5) { animation: s2a-66-2-0_8em-0_6 12s ease infinite; }
@keyframes s2a-69-2-0_8em-0_6 { 0%, 69% { opacity: 0; transform: scale(0.6); } 71%, 94% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: scale(0.6); } }
.scroll-visible .sim-panel .mk-m:nth-child(6) { animation: s2a-69-2-0_8em-0_6 12s ease infinite; }
@keyframes s2a-72-2-0_8em-0_6 { 0%, 72% { opacity: 0; transform: scale(0.6); } 74%, 94% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: scale(0.6); } }
.scroll-visible .sim-panel .mk-m:nth-child(7) { animation: s2a-72-2-0_8em-0_6 12s ease infinite; }
@keyframes s2a-75-2-0_8em-0_6 { 0%, 75% { opacity: 0; transform: scale(0.6); } 77%, 94% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: scale(0.6); } }
.scroll-visible .sim-panel .mk-m:nth-child(8) { animation: s2a-75-2-0_8em-0_6 12s ease infinite; }
@keyframes s2a-15-2-0_8em-0 { 0%, 15% { opacity: 0; transform: scale(0); } 17%, 94% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: scale(0); } }
.scroll-visible .sim-panel .cl-g:nth-child(2) .cl-cb i { animation: s2a-15-2-0_8em-0 12s ease infinite; }
@keyframes s2w-15-98-7449 { 0%, 15% { background: #fff; border-color: #b9c4b9; } 17%, 98% { background: #00a884; border-color: #00a884; } 101%, 100% { background: #fff; border-color: #b9c4b9; } }
.scroll-visible .sim-panel .cl-g:nth-child(2) .cl-cb { animation: s2w-15-98-7449 12s ease infinite; }
@keyframes s2a-22-2-0_8em-0 { 0%, 22% { opacity: 0; transform: scale(0); } 24%, 94% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: scale(0); } }
.scroll-visible .sim-panel .cl-g:nth-child(3) .cl-cb i { animation: s2a-22-2-0_8em-0 12s ease infinite; }
@keyframes s2w-22-98-7449 { 0%, 22% { background: #fff; border-color: #b9c4b9; } 24%, 98% { background: #00a884; border-color: #00a884; } 101%, 100% { background: #fff; border-color: #b9c4b9; } }
.scroll-visible .sim-panel .cl-g:nth-child(3) .cl-cb { animation: s2w-22-98-7449 12s ease infinite; }
@keyframes s2p-32 { 0%, 32% { transform: scale(1); filter: none; } 34% { transform: scale(0.88); filter: brightness(1.25); } 37%, 100% { transform: scale(1); filter: none; } }
.scroll-visible .sim-panel .cl-go { animation: s2p-32 12s ease infinite; }
@keyframes s2a-38-2_5-0_8em-None { 0%, 38% { opacity: 0; transform: translateY(0.8em); } 40.5%, 94% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: translateY(0.8em); } }
.scroll-visible .sim-panel .cl-r:nth-child(3) { animation: s2a-38-2_5-0_8em-None 12s ease infinite; }
@keyframes s2a-43-2_5-0_8em-None { 0%, 43% { opacity: 0; transform: translateY(0.8em); } 45.5%, 94% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: translateY(0.8em); } }
.scroll-visible .sim-panel .cl-r:nth-child(4) { animation: s2a-43-2_5-0_8em-None 12s ease infinite; }
@keyframes s2a-48-2_5-0_8em-None { 0%, 48% { opacity: 0; transform: translateY(0.8em); } 50.5%, 94% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: translateY(0.8em); } }
.scroll-visible .sim-panel .cl-r:nth-child(5) { animation: s2a-48-2_5-0_8em-None 12s ease infinite; }
@keyframes s2a-53-2_5-0_8em-None { 0%, 53% { opacity: 0; transform: translateY(0.8em); } 55.5%, 94% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: translateY(0.8em); } }
.scroll-visible .sim-panel .cl-r:nth-child(6) { animation: s2a-53-2_5-0_8em-None 12s ease infinite; }
@keyframes s2a-58-2_5-0_8em-None { 0%, 58% { opacity: 0; transform: translateY(0.8em); } 60.5%, 94% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: translateY(0.8em); } }
.scroll-visible .sim-panel .cl-r:nth-child(7) { animation: s2a-58-2_5-0_8em-None 12s ease infinite; }
@keyframes s2a-63-2_5-0_8em-None { 0%, 63% { opacity: 0; transform: translateY(0.8em); } 65.5%, 94% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: translateY(0.8em); } }
.scroll-visible .sim-panel .cl-r:nth-child(8) { animation: s2a-63-2_5-0_8em-None 12s ease infinite; }
@keyframes s2a-68-2_5-0_8em-None { 0%, 68% { opacity: 0; transform: translateY(0.8em); } 70.5%, 94% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: translateY(0.8em); } }
.scroll-visible .sim-panel .cl-r:nth-child(9) { animation: s2a-68-2_5-0_8em-None 12s ease infinite; }
@keyframes s2c1 { 0%, 36% { opacity: 1; } 38%, 97% { opacity: 0; } 98%, 100% { opacity: 1; } }
.scroll-visible .sim-panel .cl-c1 { animation: s2c1 12s ease infinite; }
@keyframes s2c2 { 0%, 72% { opacity: 0; } 75%, 94% { opacity: 1; } 98%, 100% { opacity: 0; } }
.scroll-visible .sim-panel .cl-c2 { animation: s2c2 12s ease infinite; }
@keyframes s2w-78-94-5833 { 0%, 78% { background: #e8f5e9; color: #015901; transform: scale(1); } 80%, 94% { background: #015901; color: #fff; transform: scale(1.06); } 97%, 100% { background: #e8f5e9; color: #015901; transform: scale(1); } }
.scroll-visible .sim-panel .cl-csv { animation: s2w-78-94-5833 12s ease infinite; }
@keyframes s2sa-14 { 0%, 14% { opacity: 1; } 16%, 97% { opacity: 0; } 98%, 100% { opacity: 1; } }
.scroll-visible .sim-panel .eg-r:nth-child(3) .st-a { animation: s2sa-14 12s ease infinite; }
@keyframes s2sb-14 { 0%, 14% { opacity: 0; } 16%, 94% { opacity: 1; } 98%, 100% { opacity: 0; } }
.scroll-visible .sim-panel .eg-r:nth-child(3) .st-b { animation: s2sb-14 12s ease infinite; }
@keyframes s2sa-26 { 0%, 26% { opacity: 1; } 28%, 97% { opacity: 0; } 98%, 100% { opacity: 1; } }
.scroll-visible .sim-panel .eg-r:nth-child(4) .st-a { animation: s2sa-26 12s ease infinite; }
@keyframes s2sb-26 { 0%, 26% { opacity: 0; } 28%, 94% { opacity: 1; } 98%, 100% { opacity: 0; } }
.scroll-visible .sim-panel .eg-r:nth-child(4) .st-b { animation: s2sb-26 12s ease infinite; }
@keyframes s2sa-38 { 0%, 38% { opacity: 1; } 40%, 97% { opacity: 0; } 98%, 100% { opacity: 1; } }
.scroll-visible .sim-panel .eg-r:nth-child(5) .st-a { animation: s2sa-38 12s ease infinite; }
@keyframes s2sb-38 { 0%, 38% { opacity: 0; } 40%, 94% { opacity: 1; } 98%, 100% { opacity: 0; } }
.scroll-visible .sim-panel .eg-r:nth-child(5) .st-b { animation: s2sb-38 12s ease infinite; }
@keyframes s2sa-50 { 0%, 50% { opacity: 1; } 52%, 97% { opacity: 0; } 98%, 100% { opacity: 1; } }
.scroll-visible .sim-panel .eg-r:nth-child(6) .st-a { animation: s2sa-50 12s ease infinite; }
@keyframes s2sb-50 { 0%, 50% { opacity: 0; } 52%, 94% { opacity: 1; } 98%, 100% { opacity: 0; } }
.scroll-visible .sim-panel .eg-r:nth-child(6) .st-b { animation: s2sb-50 12s ease infinite; }
@keyframes s2sa-62 { 0%, 62% { opacity: 1; } 64%, 97% { opacity: 0; } 98%, 100% { opacity: 1; } }
.scroll-visible .sim-panel .eg-r:nth-child(7) .st-a { animation: s2sa-62 12s ease infinite; }
@keyframes s2sb-62 { 0%, 62% { opacity: 0; } 64%, 94% { opacity: 1; } 98%, 100% { opacity: 0; } }
.scroll-visible .sim-panel .eg-r:nth-child(7) .st-b { animation: s2sb-62 12s ease infinite; }
@keyframes s2sa-74 { 0%, 74% { opacity: 1; } 76%, 97% { opacity: 0; } 98%, 100% { opacity: 1; } }
.scroll-visible .sim-panel .eg-r:nth-child(8) .st-a { animation: s2sa-74 12s ease infinite; }
@keyframes s2sb-74 { 0%, 74% { opacity: 0; } 76%, 94% { opacity: 1; } 98%, 100% { opacity: 0; } }
.scroll-visible .sim-panel .eg-r:nth-child(8) .st-b { animation: s2sb-74 12s ease infinite; }
@keyframes s2prog { 0%, 12% { transform: scaleX(0); } 14% { transform: scaleX(0.05); } 86% { transform: scaleX(1); } 94% { transform: scaleX(1); } 98%, 100% { transform: scaleX(0); } }
.scroll-visible .sim-panel .eg-prog i { animation: s2prog 12s ease infinite; }
@keyframes s2r-6-6 { 0%, 6% { clip-path: inset(0 100% 0 0); } 12%, 94% { clip-path: inset(0 0 0 0); } 98%, 100% { clip-path: inset(0 100% 0 0); } }
.scroll-visible .sim-panel .rv1 { animation: s2r-6-6 12s ease infinite; }
@keyframes s2r-16-8 { 0%, 16% { clip-path: inset(0 100% 0 0); } 24%, 94% { clip-path: inset(0 0 0 0); } 98%, 100% { clip-path: inset(0 100% 0 0); } }
.scroll-visible .sim-panel .rv2 { animation: s2r-16-8 12s ease infinite; }
@keyframes s2r-28-5 { 0%, 28% { clip-path: inset(0 100% 0 0); } 33%, 94% { clip-path: inset(0 0 0 0); } 98%, 100% { clip-path: inset(0 100% 0 0); } }
.scroll-visible .sim-panel .rv3 { animation: s2r-28-5 12s ease infinite; }
@keyframes s2r-36-4 { 0%, 36% { clip-path: inset(0 100% 0 0); } 40%, 94% { clip-path: inset(0 0 0 0); } 98%, 100% { clip-path: inset(0 100% 0 0); } }
.scroll-visible .sim-panel .rv4 { animation: s2r-36-4 12s ease infinite; }
@keyframes s2p-46 { 0%, 46% { transform: scale(1); filter: none; } 48% { transform: scale(0.88); filter: brightness(1.25); } 51%, 100% { transform: scale(1); filter: none; } }
.scroll-visible .sim-panel .ep-go { animation: s2p-46 12s ease infinite; }
@keyframes s2a-52-3--1em-None { 0%, 52% { opacity: 0; transform: translateY(-1em); } 55%, 94% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: translateY(-1em); } }
.scroll-visible .sim-panel .ep-new { animation: s2a-52-3--1em-None 12s ease infinite; }
@keyframes s2a-8-2_5-0_8em-None { 0%, 8% { opacity: 0; transform: translateY(0.8em); } 10.5%, 94% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: translateY(0.8em); } }
.scroll-visible .sim-panel .sc-m1 { animation: s2a-8-2_5-0_8em-None 12s ease infinite; }
@keyframes s2w-7-19-8918 { 0%, 7% { background: #fff; border-color: #e3e8e3; } 9%, 19% { background: #e8f5e9; border-color: #00a884; } 22%, 100% { background: #fff; border-color: #e3e8e3; } }
.scroll-visible .sim-panel .sc-s:nth-child(2) { animation: s2w-7-19-8918 12s ease infinite; }
@keyframes s2a-22-2_5-0_8em-None { 0%, 22% { opacity: 0; transform: translateY(0.8em); } 24.5%, 94% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: translateY(0.8em); } }
.scroll-visible .sim-panel .sc-m2 { animation: s2a-22-2_5-0_8em-None 12s ease infinite; }
@keyframes s2w-21-33-8918 { 0%, 21% { background: #fff; border-color: #e3e8e3; } 23%, 33% { background: #e8f5e9; border-color: #00a884; } 36%, 100% { background: #fff; border-color: #e3e8e3; } }
.scroll-visible .sim-panel .sc-s:nth-child(3) { animation: s2w-21-33-8918 12s ease infinite; }
@keyframes s2a-36-2_5-0_8em-None { 0%, 36% { opacity: 0; transform: translateY(0.8em); } 38.5%, 94% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: translateY(0.8em); } }
.scroll-visible .sim-panel .sc-m3 { animation: s2a-36-2_5-0_8em-None 12s ease infinite; }
@keyframes s2w-35-47-8918 { 0%, 35% { background: #fff; border-color: #e3e8e3; } 37%, 47% { background: #e8f5e9; border-color: #00a884; } 50%, 100% { background: #fff; border-color: #e3e8e3; } }
.scroll-visible .sim-panel .sc-s:nth-child(4) { animation: s2w-35-47-8918 12s ease infinite; }
@keyframes s2a-50-2_5-0_8em-None { 0%, 50% { opacity: 0; transform: translateY(0.8em); } 52.5%, 94% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: translateY(0.8em); } }
.scroll-visible .sim-panel .sc-m4 { animation: s2a-50-2_5-0_8em-None 12s ease infinite; }
@keyframes s2w-49-61-8918 { 0%, 49% { background: #fff; border-color: #e3e8e3; } 51%, 61% { background: #e8f5e9; border-color: #00a884; } 64%, 100% { background: #fff; border-color: #e3e8e3; } }
.scroll-visible .sim-panel .sc-s:nth-child(5) { animation: s2w-49-61-8918 12s ease infinite; }
@keyframes s2a-64-2_5-0_8em-None { 0%, 64% { opacity: 0; transform: translateY(0.8em); } 66.5%, 94% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: translateY(0.8em); } }
.scroll-visible .sim-panel .sc-m5 { animation: s2a-64-2_5-0_8em-None 12s ease infinite; }
@keyframes s2w-63-75-8918 { 0%, 63% { background: #fff; border-color: #e3e8e3; } 65%, 75% { background: #e8f5e9; border-color: #00a884; } 78%, 100% { background: #fff; border-color: #e3e8e3; } }
.scroll-visible .sim-panel .sc-s:nth-child(6) { animation: s2w-63-75-8918 12s ease infinite; }
.scroll-visible .sim-panel .ea-list .eg-r:nth-child(3) .st-a { animation: s2sa-14 12s ease infinite; }
.scroll-visible .sim-panel .ea-list .eg-r:nth-child(3) .st-b { animation: s2sb-14 12s ease infinite; }
.scroll-visible .sim-panel .ea-list .eg-r:nth-child(4) .st-a { animation: s2sa-26 12s ease infinite; }
.scroll-visible .sim-panel .ea-list .eg-r:nth-child(4) .st-b { animation: s2sb-26 12s ease infinite; }
.scroll-visible .sim-panel .ea-list .eg-r:nth-child(5) .st-a { animation: s2sa-38 12s ease infinite; }
.scroll-visible .sim-panel .ea-list .eg-r:nth-child(5) .st-b { animation: s2sb-38 12s ease infinite; }
.scroll-visible .sim-panel .ea-list .eg-r:nth-child(6) .st-a { animation: s2sa-50 12s ease infinite; }
.scroll-visible .sim-panel .ea-list .eg-r:nth-child(6) .st-b { animation: s2sb-50 12s ease infinite; }
.scroll-visible .sim-panel .ea-list .eg-r:nth-child(7) .st-a { animation: s2sa-62 12s ease infinite; }
.scroll-visible .sim-panel .ea-list .eg-r:nth-child(7) .st-b { animation: s2sb-62 12s ease infinite; }
.scroll-visible .sim-panel .ea-list .eg-r:nth-child(8) .st-a { animation: s2sa-74 12s ease infinite; }
.scroll-visible .sim-panel .ea-list .eg-r:nth-child(8) .st-b { animation: s2sb-74 12s ease infinite; }
.scroll-visible .sim-panel .ea-list .eg-prog i { animation: s2prog 12s ease infinite; }

/* ===== Interface clean e intuitiva: a tela real do app, com o painel lateral simulado ===== */
.hp-stage { position: relative; container-type: inline-size; width: 100%; line-height: 0; }
.hp-stage .app-screenshot { display: block; width: 100%; height: auto; }
.hp-panel {
    position: absolute; left: 0; top: 6.85%; bottom: 0; width: 25%;
    background: #f4f4f4; overflow: hidden;
    font-family: 'Poppins', 'Inter', sans-serif; font-size: 10px; font-size: calc(100cqw / 200); line-height: 1.3; color: #333; text-align: left;
}
.hp-panel * { box-sizing: border-box; }
.hp-home { position: absolute; inset: 0; }
.hp-home h4 { margin: 2.2em 0 0 2.2em; font-size: 2.2em; font-weight: 700; color: #015901; line-height: 1.5; }
.hp-grid { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 10.3em; gap: 1.7em 1.6em; padding: 1.2em 2.2em 0; }
.hp-card { background: #fff; border-radius: 0.4em; box-shadow: 0 0.1em 0.4em rgba(0,0,0,0.2); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.9em; }
.hp-card i { font-size: 2.6em; color: #015901; }
.hp-card span { font-size: 1.25em; color: #666; font-weight: 500; text-align: center; }

.hp-view { position: absolute; inset: 0; padding: 2.2em; background: #f4f4f4; opacity: 0; display: flex; flex-direction: column; gap: 1.5em; }
.hp-vh { display: flex; align-items: center; gap: 1.2em; font-size: 2.2em; font-weight: 700; color: #015901; margin-bottom: 0.2em; }
.hp-back { width: 1.6em; height: 1.6em; border-radius: 50%; background: #015901; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 0.7em; }
.hp-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4em; }
.hp-t { background: #fff; border-radius: 0.8em; padding: 1.3em 1.5em; box-shadow: 0 0.1em 0.4em rgba(0,0,0,0.15); border-top: 0.35em solid #cfd8cf; }
.hp-t small { display: block; color: #6b706b; font-size: 1.35em; }
.hp-t b { display: block; font-size: 3.1em; line-height: 1.2; color: #1d1f1e; }
.hp-t span { font-size: 1.3em; font-weight: 600; }
.up { color: #2e7d32; } .down { color: #c62828; }
.hp-alert { border-top-color: #c62828; } .hp-alert b { color: #c62828; }
.hp-won { border-top-color: #2e7d32; } .hp-won b { color: #2e7d32; }
.hp-panel2 { background: #fff; border-radius: 0.8em; padding: 1.3em 1.5em; box-shadow: 0 0.1em 0.4em rgba(0,0,0,0.15); display: flex; flex-direction: column; gap: 1em; }
.hp-pt { font-weight: 700; color: #015901; font-size: 1.5em; }
.hp-pt small { color: #888; font-weight: 500; font-size: 0.8em; margin-left: 0.5em; }
.hp-bars { height: 18em; display: flex; align-items: flex-end; gap: 0.7em; border-bottom: 1px solid #e3e8e3; }
.hp-bars i { flex: 1; height: var(--h); background: #a5d6a7; border-radius: 0.3em 0.3em 0 0; transform-origin: bottom; }
.hp-bars i:nth-child(9) { background: #015901; }

.hp-filters { display: flex; gap: 0.8em; font-size: 1.35em; }
.hp-filters span { background: #fff; border-radius: 2em; padding: 0.3em 0.9em; color: #666; box-shadow: 0 0.1em 0.3em rgba(0,0,0,0.12); }
.hp-filters .on { background: #015901; color: #fff; }
.hp-cl { display: flex; align-items: center; gap: 1.2em; background: #fff; border-radius: 0.8em; padding: 1.2em 1.4em; box-shadow: 0 0.1em 0.4em rgba(0,0,0,0.15); }
.hp-cl > div { flex: 1; min-width: 0; line-height: 1.3; }
.hp-cl strong { display: block; font-size: 1.7em; }
.hp-cl small { color: #2e7d32; font-weight: 700; font-size: 1.4em; }
.hp-av { flex: none; width: 3.6em; height: 3.6em; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.6em; background: #c8e6c9; color: #1b5e20; }
.hp-av1 { background: #ffe0b2; color: #e65100; } .hp-av2 { background: #cfd8dc; color: #455a64; }
.hp-chip { position: relative; flex: none; display: inline-block; width: 8.6em; height: 2.2em; font-size: 1.25em; }
.hp-chip span { position: absolute; left: 0; right: 0; top: 0; bottom: 0; display: flex; align-items: center; justify-content: center; border-radius: 2em; background: #e8f5e9; color: #2e7d32; font-weight: 600; white-space: nowrap; }
.hp-chip .hp-c2 { opacity: 0; background: #2e7d32; color: #fff; }

.hp-ms { display: flex; align-items: center; gap: 1.2em; background: #fff; border: 1px solid #dfe5df; border-radius: 0.8em; padding: 1.5em 1.5em; }
.hp-ms > div { flex: 1; min-width: 0; line-height: 1.3; }
.hp-ms strong { display: block; font-size: 1.7em; }
.hp-ms small { display: block; color: #6b706b; font-size: 1.35em; margin-top: 0.2em; }
.hp-send { flex: none; background: #015901; color: #fff; border-radius: 0.5em; padding: 0.5em 1.1em; font-weight: 700; font-size: 1.4em; }
.hp-toast { position: absolute; left: 2.2em; right: 2.2em; bottom: 3em; background: #1d1f1e; color: #fff; border-radius: 0.8em; padding: 1.1em 1.4em; font-size: 1.45em; opacity: 0; }
.hp-toast i { color: #4be04b; margin-right: 0.5em; }

.hp-day { font-size: 2em; font-weight: 700; color: #015901; }
.hp-day small { font-size: 0.6em; color: #888; font-weight: 500; margin-left: 0.5em; }
.hp-ag { position: relative; display: flex; align-items: center; gap: 1.2em; background: #fff; border-radius: 0.8em; padding: 1.3em 1.5em; box-shadow: 0 0.1em 0.4em rgba(0,0,0,0.15); }
.hp-ag > div { flex: 1; min-width: 0; line-height: 1.3; }
.hp-ag strong { display: inline-block; position: relative; font-size: 1.7em; }
.hp-ag small { display: block; color: #6b706b; font-size: 1.35em; }
.hp-time { flex: none; width: 4em; font-weight: 600; color: #555; font-size: 1.5em; }
.hp-bar { flex: none; width: 0.4em; align-self: stretch; border-radius: 0.3em; }
.hp-g { background: #00a884; } .hp-b { background: #1e6fd9; } .hp-o { background: #f5a623; }
.hp-strike::after { content: ''; position: absolute; left: 0; top: 55%; width: 100%; height: 0.1em; background: #6b706b; transform: scaleX(0); transform-origin: left; }
.hp-ck { flex: none; width: 2.6em; height: 2.6em; border-radius: 50%; border: 0.2em solid #cfd8cf; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.2em; }
.hp-ck i { transform: scale(0); }
.hp-bell { position: absolute; left: 2.2em; right: 2.2em; bottom: 3em; display: flex; align-items: center; gap: 1.2em; background: #fff; border-left: 0.6em solid #f5a623; border-radius: 0.8em; padding: 1.2em 1.4em; box-shadow: 0 0.6em 2em rgba(0,0,0,0.3); opacity: 0; }
.hp-bell > i { color: #f5a623; font-size: 2.6em; }
.hp-bell > div { flex: 1; line-height: 1.3; }
.hp-bell strong { display: block; font-size: 1.6em; }
.hp-bell small { color: #777; font-size: 1.3em; }
.hp-bell > span { background: #015901; color: #fff; border-radius: 0.5em; padding: 0.4em 1em; font-weight: 700; font-size: 1.4em; }

.hp-cursor { position: absolute; left: 0; top: 0; z-index: 9; font-size: 10px; font-size: calc(100cqw / 200); color: #1d1f1e; margin: -0.5em 0 0 -0.3em; filter: drop-shadow(0 0.1em 0.12em rgba(0,0,0,0.4)); transform: translate(28em, 62em); }
.hp-cursor i { display: block; font-size: 3.4em; }

@media (prefers-reduced-motion: reduce) {
    .hp-cursor { display: none; }
}


/* ===== Telas grandes (Dashboard, Atendimento, Agenda): abrem na área da direita, no lugar do WhatsApp ===== */
.hp-stage { font-family: 'Poppins', 'Inter', sans-serif; }
.hb {
    position: absolute; left: 25%; right: 0; top: 6.85%; bottom: 0; background: #f4f4f4; opacity: 0; padding: 3em 3.4em;
    display: flex; flex-direction: column; gap: 2.2em; overflow: hidden;
    font-family: 'Poppins', 'Inter', sans-serif; font-size: 10px; font-size: calc(100cqw / 200); line-height: 1.3; color: #333; text-align: left;
}
.hb * { box-sizing: border-box; }
.hb-h { flex: none; display: flex; align-items: center; gap: 1.6em; font-size: 3em; font-weight: 700; color: #015901; }
.hb-back { width: 1.5em; height: 1.5em; border-radius: 50%; background: #015901; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 0.6em; }
.hb-chips { margin-left: auto; display: flex; gap: 0.5em; font-size: 0.5em; font-weight: 600; }
.hb-chips span { background: #fff; border-radius: 2em; padding: 0.35em 1em; color: #666; box-shadow: 0 0.1em 0.3em rgba(0,0,0,0.12); }
.hb-chips .on { background: #015901; color: #fff; }
.hb-row { flex: none; display: grid; gap: 2em; }
.hb-r4 { grid-template-columns: repeat(4, 1fr); } .hb-r3 { grid-template-columns: repeat(3, 1fr); }
.hb-t { background: #fff; border-radius: 1em; padding: 1.6em 2em; box-shadow: 0 0.1em 0.5em rgba(0,0,0,0.15); border-top: 0.45em solid #cfd8cf; }
.hb-t small { display: block; color: #6b706b; font-size: 1.7em; }
.hb-t b { display: block; font-size: 5em; line-height: 1.15; color: #1d1f1e; }
.hb-t span { font-size: 1.6em; font-weight: 600; }
.hb-alert { border-top-color: #c62828; } .hb-alert b { color: #c62828; }
.hb-blue { border-top-color: #1e6fd9; } .hb-blue b { color: #1e6fd9; }
.hb-green { border-top-color: #2e7d32; } .hb-green b { color: #2e7d32; }
.hb-red { border-top-color: #c62828; } .hb-red b { color: #c62828; }
.hb-two { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 2em; }
.hb-p { background: #fff; border-radius: 1em; padding: 1.8em 2em; box-shadow: 0 0.1em 0.5em rgba(0,0,0,0.15); display: flex; flex-direction: column; min-height: 0; }
.hb-pt { font-weight: 700; color: #015901; font-size: 2em; margin-bottom: 0.8em; }
.hb-pt small { color: #888; font-weight: 500; font-size: 0.7em; margin-left: 0.5em; }
.hb-bars { flex: 1; min-height: 0; display: flex; align-items: flex-end; gap: 1em; border-bottom: 1px solid #e3e8e3; }
.hb-bars i { flex: 1; height: var(--h); background: #a5d6a7; border-radius: 0.4em 0.4em 0 0; transform-origin: bottom; }
.hb-bars i:nth-child(9) { background: #015901; }
.hb-hours { display: flex; justify-content: space-between; font-size: 1.5em; color: #8a8f8a; padding-top: 0.5em; }
.hb-w { display: flex; align-items: center; gap: 1.4em; padding: 1em 0; border-top: 1px solid #eef0ee; }
.hb-w:first-of-type { border-top: 0; }
.hb-w > div { flex: 1; min-width: 0; line-height: 1.25; }
.hb-w strong { display: block; font-size: 2em; }
.hb-w small { color: #c62828; font-size: 1.6em; }
.hb-av { flex: none; width: 4em; height: 4em; border-radius: 50%; background: #cfd8dc; color: #455a64; font-weight: 700; display: flex; align-items: center; justify-content: center; font-size: 1.8em; }
.hb-av1 { background: #ffe0b2; color: #e65100; } .hb-av2 { background: #c8e6c9; color: #1b5e20; }
.hb-open { flex: none; background: #015901; color: #fff; border-radius: 0.6em; padding: 0.5em 1.1em; font-weight: 600; font-size: 1.6em; }

/* Atendimento */
.hb-kb { position: relative; flex: 1; min-height: 0; }
.hb-col { position: absolute; top: 0; bottom: 0; width: 34.5em; background: #e9ece9; border-radius: 1em; }
.hb-ch { padding: 1.2em 1.5em; line-height: 1.25; }
.hb-ch strong { display: block; font-size: 2.1em; color: #015901; }
.hb-ch small, .hb-tot { font-size: 1.5em; color: #6b706b; font-weight: 600; }
.hb-tot { position: relative; display: inline-block; min-width: 8em; }
.hb-tot span { display: block; }
.hb-tot .hb-t2 { position: absolute; left: 0; top: 0; opacity: 0; color: #2e7d32; }
.hb-cd, .hb-mv { position: absolute; left: 1.5em; width: 31.5em; height: 12em; background: #fff; border-radius: 0.9em; padding: 1.3em; display: flex; gap: 1.2em; align-items: flex-start; box-shadow: 0 0.1em 0.5em rgba(0,0,0,0.15); }
.hb-cd > div, .hb-mv > div { min-width: 0; line-height: 1.25; }
.hb-cd strong, .hb-mv strong { display: block; font-size: 1.9em; }
.hb-cd small, .hb-mv small { display: block; color: #2e7d32; font-weight: 700; font-size: 1.6em; }
.hb-chip { display: inline-block; margin-top: 0.3em; background: #e8f5e9; color: #2e7d32; border-radius: 1em; padding: 0.1em 0.8em; font-size: 1.3em; font-weight: 600; }
.hb-cd .hb-av, .hb-mv .hb-av { width: 3.6em; height: 3.6em; font-size: 1.6em; }
.hb-mv { left: 37.5em; top: 7.5em; z-index: 6; }
.hb-gh { position: absolute; left: 37.5em; top: 7.5em; width: 31.5em; height: 12em; border: 0.3em dashed #b8c4b8; border-radius: 0.9em; opacity: 0; }
.hb-won { position: absolute; right: -1.2em; top: -1.2em; width: 3.4em; height: 3.4em; border-radius: 50%; background: #2e7d32; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.6em; transform: scale(0); }

/* Agenda */
.hb-agb { flex: 1; min-height: 0; display: grid; grid-template-columns: 2.1fr 1fr; gap: 2.4em; }
.hb-cal { background: #fff; border-radius: 1em; box-shadow: 0 0.1em 0.5em rgba(0,0,0,0.15); display: flex; flex-direction: column; overflow: hidden; min-height: 0; }
.hb-cal-h { background: #015901; color: #fff; font-weight: 600; font-size: 2.2em; padding: 0.55em 0.9em; display: flex; align-items: center; gap: 0.6em; }
.hb-cal-h i:last-child, .hb-cal-h .hb-nv { margin-left: auto; font-size: 0.7em; opacity: 0.85; }
.hb-wk { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; font-weight: 600; color: #8a8f8a; font-size: 1.7em; padding: 0.8em 1.2em 0.2em; }
.hb-dys { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(7, 1fr); grid-auto-rows: 1fr; gap: 0.4em; padding: 0.4em 1.2em 1.4em; }
.hb-dy { border-radius: 0.8em; display: flex; flex-direction: column; align-items: center; padding-top: 0.8em; font-size: 1.9em; color: #333; }
.hb-dy.past { color: #b3b7b3; }
.hb-dy b { font-weight: 600; width: 1.9em; height: 1.9em; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.hb-dy.today { background: #e8f5e9; } .hb-dy.today b { background: #015901; color: #fff; }
.hb-dd { display: flex; gap: 0.3em; margin-top: 0.4em; }
.hb-dd i { width: 0.55em; height: 0.55em; border-radius: 50%; }
.hb-dd .g { background: #00a884; } .hb-dd .b { background: #1e6fd9; } .hb-dd .o { background: #f5a623; }
.hb-side { position: relative; background: #fff; border-radius: 1em; box-shadow: 0 0.1em 0.5em rgba(0,0,0,0.15); padding: 2em; min-height: 0; }
.hb-day { font-size: 2.6em; font-weight: 700; color: #015901; margin-bottom: 0.5em; }
.hb-day small { font-size: 0.55em; color: #888; font-weight: 500; margin-left: 0.5em; }
.hb-ag { position: relative; display: flex; align-items: center; gap: 1.2em; padding: 1.3em 0; border-top: 1px solid #eef0ee; }
.hb-ag > div { flex: 1; min-width: 0; line-height: 1.3; }
.hb-ag strong { display: inline-block; position: relative; font-size: 2em; }
.hb-ag small { display: block; color: #6b706b; font-size: 1.6em; }
.hb-tm { flex: none; width: 3.6em; font-weight: 600; color: #555; font-size: 1.8em; }
.hb-br { flex: none; width: 0.5em; align-self: stretch; border-radius: 0.3em; }
.hb-br.g { background: #00a884; } .hb-br.b { background: #1e6fd9; } .hb-br.o { background: #f5a623; }
.hb-st::after { content: ''; position: absolute; left: 0; top: 55%; width: 100%; height: 0.12em; background: #6b706b; transform: scaleX(0); transform-origin: left; }
.hb-ck { flex: none; width: 3em; height: 3em; border-radius: 50%; border: 0.22em solid #cfd8cf; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.3em; }
.hb-ck i { transform: scale(0); }
.hb-bell { position: absolute; left: 2em; right: 2em; bottom: 2em; display: flex; align-items: center; gap: 1.2em; background: #fff; border-left: 0.7em solid #f5a623; border-radius: 1em; padding: 1.3em 1.5em; box-shadow: 0 0.6em 2.4em rgba(0,0,0,0.3); opacity: 0; }
.hb-bell > i { color: #f5a623; font-size: 3em; }
.hb-bell > div { flex: 1; line-height: 1.3; }
.hb-bell strong { display: block; font-size: 1.9em; }
.hb-bell small { color: #777; font-size: 1.5em; }
.hb-bell > span { background: #015901; color: #fff; border-radius: 0.6em; padding: 0.4em 1em; font-weight: 700; font-size: 1.6em; }

@keyframes hp-home { 0%, 54.9% { opacity: 1; } 55.8%, 71.2% { opacity: 0; } 72.2%, 100% { opacity: 1; } }
.scroll-visible .hp-home { animation: hp-home 28s linear infinite; }
@keyframes hp-view0 { 0%, 5% { opacity: 0; } 6.4%, 21% { opacity: 1; } 22%, 100% { opacity: 0; } }
.scroll-visible .hb-v0 { animation: hp-view0 28s linear infinite; }
@keyframes hp-view1 { 0%, 30% { opacity: 0; } 31.4%, 46% { opacity: 1; } 47%, 100% { opacity: 0; } }
.scroll-visible .hb-v1 { animation: hp-view1 28s linear infinite; }
@keyframes hp-view2 { 0%, 55% { opacity: 0; } 56.4%, 71% { opacity: 1; } 72%, 100% { opacity: 0; } }
.scroll-visible .hp-v2 { animation: hp-view2 28s linear infinite; }
@keyframes hp-view3 { 0%, 80% { opacity: 0; } 81.4%, 96% { opacity: 1; } 97%, 100% { opacity: 0; } }
.scroll-visible .hb-v3 { animation: hp-view3 28s linear infinite; }
@keyframes hp-hi0 { 0%, 2.4% { box-shadow: 0 0.1em 0.4em rgba(0,0,0,0.2); background: #fff; transform: none; } 3.4%, 5.4% { box-shadow: 0 0 0 0.35em rgba(0,186,0,0.4); background: #f1fbf1; transform: translateY(-0.3em); } 6.4%, 100% { box-shadow: 0 0.1em 0.4em rgba(0,0,0,0.2); background: #fff; transform: none; } }
.scroll-visible .hp-card:nth-child(1) { animation: hp-hi0 28s ease infinite; }
@keyframes hp-hi1 { 0%, 27.4% { box-shadow: 0 0.1em 0.4em rgba(0,0,0,0.2); background: #fff; transform: none; } 28.4%, 30.4% { box-shadow: 0 0 0 0.35em rgba(0,186,0,0.4); background: #f1fbf1; transform: translateY(-0.3em); } 31.4%, 100% { box-shadow: 0 0.1em 0.4em rgba(0,0,0,0.2); background: #fff; transform: none; } }
.scroll-visible .hp-card:nth-child(5) { animation: hp-hi1 28s ease infinite; }
@keyframes hp-hi2 { 0%, 52.4% { box-shadow: 0 0.1em 0.4em rgba(0,0,0,0.2); background: #fff; transform: none; } 53.4%, 55.4% { box-shadow: 0 0 0 0.35em rgba(0,186,0,0.4); background: #f1fbf1; transform: translateY(-0.3em); } 56.4%, 100% { box-shadow: 0 0.1em 0.4em rgba(0,0,0,0.2); background: #fff; transform: none; } }
.scroll-visible .hp-card:nth-child(10) { animation: hp-hi2 28s ease infinite; }
@keyframes hp-hi3 { 0%, 77.4% { box-shadow: 0 0.1em 0.4em rgba(0,0,0,0.2); background: #fff; transform: none; } 78.4%, 80.4% { box-shadow: 0 0 0 0.35em rgba(0,186,0,0.4); background: #f1fbf1; transform: translateY(-0.3em); } 81.4%, 100% { box-shadow: 0 0.1em 0.4em rgba(0,0,0,0.2); background: #fff; transform: none; } }
.scroll-visible .hp-card:nth-child(2) { animation: hp-hi3 28s ease infinite; }
@keyframes hp-cursor { 0% { transform: translate(28em, 69.7em) scale(1); } 3% { transform: translate(13.2em, 20em) scale(1); } 4% { transform: translate(13.2em, 20em) scale(0.78); } 4.9% { transform: translate(13.2em, 20em) scale(1); } 9.5% { transform: translate(100em, 60em) scale(1); } 14% { transform: translate(125em, 45em) scale(1); } 20% { transform: translate(54.8em, 12.8em) scale(1); } 20.9% { transform: translate(54.8em, 12.8em) scale(0.78); } 21.7% { transform: translate(54.8em, 12.8em) scale(1); } 23.6% { transform: translate(28em, 69.7em) scale(1); } 28% { transform: translate(13.2em, 44em) scale(1); } 29% { transform: translate(13.2em, 44em) scale(0.78); } 29.9% { transform: translate(13.2em, 44em) scale(1); } 33% { transform: translate(104em, 36em) scale(1); } 38% { transform: translate(146em, 60em) scale(1); } 45% { transform: translate(54.8em, 12.8em) scale(1); } 45.9% { transform: translate(54.8em, 12.8em) scale(0.78); } 46.7% { transform: translate(54.8em, 12.8em) scale(1); } 48.6% { transform: translate(28em, 69.7em) scale(1); } 53% { transform: translate(36.8em, 68em) scale(1); } 54% { transform: translate(36.8em, 68em) scale(0.78); } 54.9% { transform: translate(36.8em, 68em) scale(1); } 58.8% { transform: translate(42em, 35.7em) scale(1); } 60.2% { transform: translate(42em, 35.7em) scale(0.78); } 61% { transform: translate(42em, 35.7em) scale(1); } 63% { transform: translate(30em, 47.7em) scale(1); } 70% { transform: translate(4.6em, 12.3em) scale(1); } 70.9% { transform: translate(4.6em, 12.3em) scale(0.78); } 71.7% { transform: translate(4.6em, 12.3em) scale(1); } 73.6% { transform: translate(28em, 69.7em) scale(1); } 78% { transform: translate(36.8em, 20em) scale(1); } 79% { transform: translate(36.8em, 20em) scale(0.78); } 79.9% { transform: translate(36.8em, 20em) scale(1); } 84.5% { transform: translate(110em, 62em) scale(1); } 89% { transform: translate(130em, 40em) scale(1); } 95% { transform: translate(54.8em, 12.8em) scale(1); } 95.9% { transform: translate(54.8em, 12.8em) scale(0.78); } 96.7% { transform: translate(54.8em, 12.8em) scale(1); } 98.6% { transform: translate(28em, 69.7em) scale(1); } 100% { transform: translate(28em, 69.7em) scale(1); } }
.scroll-visible .hp-cursor { animation: hp-cursor 28s ease-in-out infinite; }
@keyframes hp-grow { 0%, 7% { transform: scaleY(0); } 10.5%, 100% { transform: scaleY(1); } }
.scroll-visible .hb-bars i { animation: hp-grow 28s cubic-bezier(0.3,1.2,0.5,1) infinite; animation-delay: calc(var(--i) * 0.07s); }
@keyframes hb-move { 0%, 34% { transform: translate(0, 0) scale(1); box-shadow: 0 0.1em 0.5em rgba(0,0,0,0.15); }
 35% { transform: translate(0, 0) scale(1.06); box-shadow: 0 0.8em 1.8em rgba(0,0,0,0.25); }
 37% { transform: translate(36.5em, 13.5em) scale(1.06); box-shadow: 0 0.8em 1.8em rgba(0,0,0,0.25); }
 37.8%, 39% { transform: translate(36.5em, 13.5em) scale(1); box-shadow: 0 0.1em 0.5em rgba(0,0,0,0.15); }
 39.8% { transform: translate(36.5em, 13.5em) scale(1.06); box-shadow: 0 0.8em 1.8em rgba(0,0,0,0.25); }
 41.8% { transform: translate(73em, 13.5em) scale(1.06); box-shadow: 0 0.8em 1.8em rgba(0,0,0,0.25); }
 42.6%, 99.9% { transform: translate(73em, 13.5em) scale(1); box-shadow: 0 0 0 0.35em rgba(46,125,50,0.45); }
 100% { transform: translate(0, 0) scale(1); box-shadow: 0 0.1em 0.5em rgba(0,0,0,0.15); } }
.scroll-visible .hb-mv { animation: hb-move 28s ease-in-out infinite; }
@keyframes hb-gh { 0%, 35% { opacity: 0; } 36%, 99.9% { opacity: 1; } 100% { opacity: 0; } }
.scroll-visible .hb-gh { animation: hb-gh 28s ease infinite; }
@keyframes hb-won { 0%, 42% { transform: scale(0); } 43.6% { transform: scale(1.3); } 44.6%, 99.9% { transform: scale(1); } 100% { transform: scale(0); } }
.scroll-visible .hb-won { animation: hb-won 28s ease infinite; }
@keyframes hb-t1 { 0%, 42% { opacity: 1; } 43%, 99.9% { opacity: 0; } 100% { opacity: 1; } }
@keyframes hb-t2 { 0%, 42% { opacity: 0; } 43%, 99.9% { opacity: 1; } 100% { opacity: 0; } }
.scroll-visible .hb-t1 { animation: hb-t1 28s ease infinite; }
.scroll-visible .hb-t2 { animation: hb-t2 28s ease infinite; }
@keyframes hp-msl { 0%, 59% { background: #fff; border-color: #dfe5df; } 60%, 67% { background: #e8f5e9; border-color: #00a884; } 68%, 100% { background: #fff; border-color: #dfe5df; } }
@keyframes hp-toast { 0%, 61% { opacity: 0; transform: translateY(2em); } 62%, 68% { opacity: 1; transform: none; } 69%, 100% { opacity: 0; transform: translateY(2em); } }
@keyframes hp-send { 0%, 60.2% { transform: scale(1); } 61% { transform: scale(0.85); } 61.8%, 100% { transform: scale(1); } }
.scroll-visible .hp-ms-live { animation: hp-msl 28s ease infinite; }
.scroll-visible .hp-toast { animation: hp-toast 28s ease infinite; }
.scroll-visible .hp-ms-live .hp-send { animation: hp-send 28s ease infinite; }
@keyframes hb-bell { 0%, 83% { opacity: 0; transform: translateY(3em); } 84.2%, 90% { opacity: 1; transform: none; } 91.2%, 100% { opacity: 0; transform: translateY(3em); } }
@keyframes hb-ckbg { 0%, 90% { background: transparent; border-color: #cfd8cf; } 91%, 94% { background: #00a884; border-color: #00a884; } 95%, 100% { background: transparent; border-color: #cfd8cf; } }
@keyframes hb-ckin { 0%, 90% { transform: scale(0); } 91%, 94% { transform: scale(1); } 95%, 100% { transform: scale(0); } }
@keyframes hb-line { 0%, 90% { transform: scaleX(0); } 92%, 94% { transform: scaleX(1); } 95%, 100% { transform: scaleX(0); } }
.scroll-visible .hb-bell { animation: hb-bell 28s ease infinite; }
.scroll-visible .hb-ck { animation: hb-ckbg 28s ease infinite; }
.scroll-visible .hb-ck i { animation: hb-ckin 28s ease infinite; }
.scroll-visible .hb-st::after { animation: hb-line 28s ease infinite; }


/* ===== Hero: as 3 janelas do app em HTML/CSS, animadas ===== */
.hh-stage { position: relative; container-type: inline-size; width: 100%; aspect-ratio: 2000 / 1811; }
.hh-scene { position: absolute; inset: 0; font-family: 'Poppins', 'Inter', sans-serif; font-size: 6px; font-size: calc(100cqw / 100); line-height: 1.25; color: #333; text-align: left; }
.hh-scene * { box-sizing: border-box; }
.hh-w { position: absolute; width: 40.35%; height: 82%; animation: hhIn 1s cubic-bezier(.2,.8,.2,1) both; }
.hh-wl { left: 2.5%; top: 5.25%; animation-delay: .25s; --fx: 20em; }
.hh-wr { left: 52.25%; top: 5.25%; animation-delay: .4s; --fx: -20em; }
.hh-wc { left: 27%; top: 9%; z-index: 2; animation-delay: .75s; --fx: 0em; --fz: .93; }
@keyframes hhIn { from { opacity: 0; transform: translateX(var(--fx, 0)) scale(var(--fz, .94)); } to { opacity: 1; transform: none; } }
.hh-f { width: 100%; height: 100%; animation: hhFloat 7s ease-in-out 1.8s infinite; }
.hh-f2 { animation-duration: 8.5s; animation-delay: 2.1s; }
.hh-f3 { animation-duration: 6.2s; animation-delay: 2.4s; }
@keyframes hhFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.1em); } }
.hh-win { position: relative; width: 100%; height: 100%; background: #f5f4f3; border: .17em solid #1fe01f; overflow: hidden; display: flex; flex-direction: column; }
.hh-win::after { content: ''; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 1.4em rgba(31,224,31,.25); }
.hh-w::before { content: ''; position: absolute; inset: 0; box-shadow: 0 0 2.2em rgba(31,224,31,.45); animation: hhGlow 5s ease-in-out infinite; pointer-events: none; }
@keyframes hhGlow { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
.hh-bar { flex: none; height: 4em; background: #015901; color: #fff; display: flex; align-items: center; padding: 0 1.6em; gap: 1.6em; }
.hh-logo { font-weight: 800; font-size: 2em; display: flex; align-items: center; gap: .35em; letter-spacing: -.02em; }
.hh-logo i { font-size: .8em; border: .1em solid #fff; border-radius: 50%; width: 1.5em; height: 1.5em; display: flex; align-items: center; justify-content: center; }
.hh-x { font-size: 1.3em; opacity: .9; }
.hh-body { flex: 1; min-height: 0; position: relative; padding: 0 1.3em; overflow: hidden; }
.hh-ttl { font-weight: 600; font-size: 1.6em; color: #333; display: flex; align-items: center; gap: .9em; height: 3.2em; margin: 0 -.1em; border-bottom: .06em solid #e3e3e3; margin-bottom: 1.2em; }
.hh-ttl i { font-size: .95em; color: #015901; }
.hh-ph { background: #015901; color: #fff; font-weight: 700; font-size: 1.45em; padding: .55em .8em; border-radius: .4em .4em 0 0; display: flex; align-items: center; gap: .6em; height: 2.4em; }
.hh-ph2 { margin-top: 1.6em; border-radius: .4em; }
.hh-ph-r { justify-content: flex-end; padding-right: 1em; }
.hh-cnt { position: relative; display: inline-block; width: 6em; height: 1.5em; margin-left: .3em; font-size: .75em; }
.hh-cnt em { position: absolute; left: 0; top: 0; font-style: normal; background: rgba(255,255,255,.2); border-radius: 1em; padding: .1em .8em; white-space: nowrap; }
.hh-c1 { opacity: 0; animation: hhC1 10s infinite; } .hh-c0 { animation: hhC0 10s infinite; }
@keyframes hhC0 { 0%, 17% { opacity: 1; } 19%, 96% { opacity: 0; } 98%, 100% { opacity: 1; } }
@keyframes hhC1 { 0%, 17% { opacity: 0; } 19%, 96% { opacity: 1; } 98%, 100% { opacity: 0; } }
.hh-btn-o { margin-top: .9em; border: .1em solid #888; border-radius: .4em; text-align: center; font-weight: 700; font-size: 1.3em; color: #015901; padding: .6em; background: #fff; }
.hh-ta { margin-top: .9em; background: #fff; border: .08em solid #ddd; border-radius: .4em; padding: .7em .8em; font-size: 1.3em; color: #777; height: 3.6em; overflow: hidden; white-space: nowrap; }
.hh-ta2 { height: 8em; font-family: 'Courier New', monospace; font-size: 1.2em; white-space: normal; margin-top: .6em; }
.hh-ta3 { height: 6em; }
.hh-search { height: 2.6em; }
.hh-list { position: relative; height: 10.2em; margin-top: .5em; background: #fff; border-radius: .4em; padding: .5em .9em; overflow: hidden; }
.hh-empty { position: absolute; left: 0; right: 0; top: 2.2em; text-align: center; color: #888; font-size: 1.3em; animation: hhC0 10s infinite; }
.hh-empty small { display: block; margin-top: .9em; font-size: .85em; }
.hh-ct { font-size: 1.3em; color: #333; padding: .45em .2em; border-bottom: .06em solid #eee; opacity: 0; transform: translateY(.8em); animation: hhRow 10s infinite; white-space: nowrap; }
.hh-ct b { font-weight: 600; color: #015901; margin-right: .5em; }
.hh-ct2 { animation-delay: .35s; } .hh-ct3 { animation-delay: .7s; } .hh-ct4 { animation-delay: 1.05s; }
@keyframes hhRow { 0%, 18% { opacity: 0; transform: translateY(.8em); } 24%, 95% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: translateY(.8em); } }
.hh-sub { background: #e4e4e4; color: #555; font-size: 1.2em; padding: .7em .9em; line-height: 1.35; }
.hh-tabs { display: flex; gap: .4em; margin-top: 1em; font-size: 1.25em; }
.hh-tabs span { padding: .45em 1em; background: #eee; border: .06em solid #ddd; border-radius: .4em .4em 0 0; color: #777; }
.hh-tabs .on { background: #fff; color: #015901; font-weight: 600; }
.hh-btns { display: flex; gap: .6em; margin-top: .9em; font-size: 1.25em; }
.hh-btns span { border: .1em solid #015901; border-radius: .4em; padding: .55em .8em; font-weight: 700; color: #015901; white-space: nowrap; }
/* direita */
.hh-gl { margin-top: .9em; background: #fff; border-radius: .4em; height: 20em; overflow: hidden; padding: .3em 0; }
.hh-g { font-size: 1.5em; padding: 1em 1em 1em 9.5em; color: #333; border-bottom: .06em solid #eee; white-space: nowrap; animation: hhSel 8s infinite; }
.hh-g1 { animation-delay: 0s; } .hh-g2 { animation-delay: 1.4s; } .hh-g3 { animation-delay: 2.8s; } .hh-g4 { animation-delay: 4.2s; } .hh-g5 { animation-delay: 5.6s; }
@keyframes hhSel { 0%, 17% { background: #e8f5e9; color: #015901; font-weight: 600; } 19%, 100% { background: transparent; color: #333; font-weight: 400; } }
.hh-spin { margin-left: 0; animation: hhRot 4s linear infinite; }
@keyframes hhRot { to { transform: rotate(360deg); } }
/* centro */
.hh-ph-s { height: 3.2em; border-radius: .5em .5em 0 0; }
.hh-new { margin-left: auto; background: #fff; color: #222; font-size: .85em; font-weight: 600; padding: .25em .9em; border-radius: .35em; white-space: nowrap; }
.hh-sub-s { margin-top: 0; }
.hh-sc { margin: 1.9em 1.8em 0; height: 14em; background: #fff; border-radius: .8em; box-shadow: 0 .1em .6em rgba(0,0,0,.12); padding: 1.75em 1.75em 1.75em; display: flex; flex-direction: column; }
.hh-sc + .hh-sc { margin-top: 1.85em; }
.hh-sc:first-of-type { margin-top: 1.9em; }
.hh-sc h6 { margin: 0; font-size: 1.55em; font-weight: 600; color: #222; }
.hh-sc p { margin: .55em 0 0; font-size: 1.3em; color: #666; }
.hh-sc p i { color: #015901; margin-right: .3em; }
.hh-sc p small { font-size: .85em; margin-left: .5em; color: #777; }
.hh-row { margin-top: auto; display: flex; gap: .5em; height: 3.5em; }
.hh-run { position: relative; flex: 14.65; border-radius: .35em; }
.hh-l { position: absolute; inset: 0; background: #015901; color: #fff; font-weight: 700; font-size: 1.4em; display: flex; align-items: center; justify-content: center; gap: .5em; border-radius: .35em; overflow: hidden; }
.hh-l i { font-size: .8em; }
.hh-l2, .hh-l3 { opacity: 0; }
.hh-l2 { background: #1b7a1b; }
.hh-l3 { background: #2e7d32; }
.hh-prog { position: absolute; left: 0; top: 0; bottom: 0; right: 0; background: #0f9a0f; transform: scaleX(0); transform-origin: left; animation: hhProg 10s linear infinite; }
.hh-l2 em { position: relative; font-style: normal; }
.hh-l1 { animation: hhL1 10s infinite; } .hh-l2 { animation: hhL2 10s infinite; } .hh-l3 { animation: hhL3 10s infinite; }
@keyframes hhL1 { 0%, 25% { opacity: 1; } 26%, 93% { opacity: 0; } 97%, 100% { opacity: 1; } }
@keyframes hhL2 { 0%, 25% { opacity: 0; } 26%, 51% { opacity: 1; } 52%, 100% { opacity: 0; } }
@keyframes hhL3 { 0%, 51% { opacity: 0; } 53%, 90% { opacity: 1; } 94%, 100% { opacity: 0; } }
@keyframes hhProg { 0%, 26% { transform: scaleX(0); } 51%, 100% { transform: scaleX(1); } }
.hh-ed, .hh-del { flex: 7.35; border-radius: .35em; display: flex; align-items: center; justify-content: center; font-size: 1.3em; }
.hh-ed { border: .1em solid #015901; color: #015901; background: #fff; }
.hh-del { background: #fde4e6; color: #d32f2f; border: .06em solid #f6c9cd; }
.hh-toast { position: absolute; left: 3.2em; right: 3.2em; bottom: 2.4em; background: #1d1f1e; color: #fff; font-size: 1.4em; font-weight: 600; padding: .8em 1em; border-radius: .6em; box-shadow: 0 .4em 1.4em rgba(0,0,0,.35); opacity: 0; animation: hhToast 10s infinite; }
.hh-toast i { color: #4be04b; margin-right: .4em; }
@keyframes hhToast { 0%, 52% { opacity: 0; transform: translateY(1em); } 56%, 86% { opacity: 1; transform: none; } 90%, 100% { opacity: 0; transform: translateY(1em); } }
.hh-cur { position: absolute; left: 0; top: 0; z-index: 9; font-size: 1em; color: #fff; margin: -.3em 0 0 -.2em; filter: drop-shadow(0 0 .12em #000) drop-shadow(0 0 .12em #000) drop-shadow(0 .2em .3em rgba(0,0,0,.4)); opacity: 0; animation: hhCur 10s infinite; pointer-events: none; }
.hh-cur i { display: block; font-size: 3.4em; }
@keyframes hhCur {
    0%   { opacity: 0; transform: translate(30em, 62em) scale(1); }
    8%   { opacity: 1; transform: translate(30em, 56em) scale(1); }
    22%  { opacity: 1; transform: translate(13em, 33em) scale(1); }
    25%  { transform: translate(13em, 33em) scale(.82); }
    28%  { transform: translate(13em, 33em) scale(1); }
    62%  { opacity: 1; transform: translate(13em, 33em) scale(1); }
    78%  { opacity: 1; transform: translate(30em, 58em) scale(1); }
    88%, 100% { opacity: 0; transform: translate(30em, 62em) scale(1); }
}
.hh-stage.hh-off *, .hh-stage.hh-off *::before { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
    .hh-w, .hh-f, .hh-w::before, .hh-scene * { animation: none !important; }
    .hh-cur { display: none; }
}