/* =========================================
   1. VARIÁVEIS & RESET
   ========================================= */
:root {
    --primary: #1988fe;
    --primary-hover: #3ba0ff;
    --primary-soft: rgba(25, 136, 254, 0.12);
    --text-dark: #f1f5f9;
    --text-body: #cbd5e1;
    --text-light: #94a3b8;
    --bg-main: #0b1120;
    --bg-card: #131c31;
    --bg-card-hover: #182340;
    --white: #131c31;
    --radius-lg: 24px;
    --shadow-soft: 0 4px 20px -5px rgba(0,0,0,0.3);
    --shadow-hover: 0 20px 40px -10px rgba(25, 136, 254, 0.25);
    --border-color: rgba(255,255,255,0.06);
    --border-color-hover: rgba(25, 136, 254, 0.3);
}
html {
    scroll-behavior: smooth;
}

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

html, body {
    width: 100%;
    overflow-x: hidden;
    background-color: var(--bg-main);
    font-family: 'Inter', sans-serif;
    color: var(--text-body);
    line-height: 1.6;
}

h1, h2, h3 {
    font-family: 'Poppins', sans-serif;
    color: var(--text-dark);
    line-height: 1.2;
}

.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 24px;
    width: 100%;
}

a { text-decoration: none; transition: 0.3s; }

/* =========================================
   2. ELEMENTOS DE FUNDO (CORRIGIDO: HERO + MOBILE)
   ========================================= */

/* 1. O Container do Fundo */
.overflow-wrapper {
    /* MUDANÇA 1: Absolute faz ele ficar só no topo e sumir ao rolar */
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 110vh; /* Um pouco maior que a tela para cobrir toda a hero */
    overflow: hidden; 
    z-index: 0; 
    pointer-events: none;
    
    /* MUDANÇA 2: Máscara para dissolver suavemente para o branco no final */
    mask-image: linear-gradient(to bottom, black 0%, black 70%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 0%, black 70%, transparent 100%);
}

/* 2. Forçar o conteúdo para frente */
header, section, footer {
    position: relative;
    z-index: 1;
}

/* 3. A Grade de Fundo */
.background-grid {
    position: absolute; 
    width: 100%; 
    height: 100%; 
    opacity: 0.3;
    background-image: radial-gradient(rgba(148, 163, 184, 0.08) 1px, transparent 1px);
    background-size: 30px 30px;
}

/* 4. Os Borrões (Blobs) */
.blur-blob {
    position: absolute; 
    border-radius: 50%;
    filter: blur(80px); 
    opacity: 0.5; /* Opacidade padrão Desktop */
    will-change: transform; 
}

/* BLOB 1: Azul Principal */
.blob-1 {
    width: 600px;
    height: 600px;
    background: var(--primary);
    top: -20%;
    right: -10%;
    animation: float-blob-1 12s infinite ease-in-out;
}

/* BLOB 2: Azul Claro */
.blob-2 {
    width: 500px;
    height: 500px;
    background: #60a5fa;
    bottom: 10%;
    left: -10%;
    animation: float-blob-2 15s infinite ease-in-out;
}

/* --- ANIMAÇÕES BLOB (mais orgânicas e móveis) --- */
@keyframes float-blob-1 {
    0% { transform: translate(0, 0) scale(1) rotate(0deg); }
    25% { transform: translate(-100px, 60px) scale(1.15) rotate(5deg); }
    50% { transform: translate(-40px, 120px) scale(0.95) rotate(-3deg); }
    75% { transform: translate(-130px, 30px) scale(1.1) rotate(4deg); }
    100% { transform: translate(0, 0) scale(1) rotate(0deg); }
}
@keyframes float-blob-2 {
    0% { transform: translate(0, 0) scale(1) rotate(0deg); }
    25% { transform: translate(80px, -70px) scale(1.12) rotate(-4deg); }
    50% { transform: translate(130px, 20px) scale(0.9) rotate(6deg); }
    75% { transform: translate(40px, -100px) scale(1.18) rotate(-2deg); }
    100% { transform: translate(0, 0) scale(1) rotate(0deg); }
}

/* =========================================
   AJUSTE DE EMERGÊNCIA MOBILE (BLOBS)
   ========================================= */
@media (max-width: 1024px) {
    .blob-1, .blob-2 {
        /* Reduz drasticamente o tamanho */
        width: 250px !important; 
        height: 250px !important;
        
        /* Reduz a intensidade para não ficar agressivo */
        opacity: 0.40 !important; 
        filter: blur(60px) !important;
    }

    /* Reposiciona para não invadir o texto no mobile */
    .blob-1 { top: -100px; right: -50px; }
    .blob-2 { bottom: -50px; left: -50px; }
}
/* =========================================
   3. HERO & HEADER
   ========================================= */
.simple-header { padding: 24px 0; text-align: center; }
.brand-logo { height: 40px; width: auto; }

.hero-section { padding: 60px 0 20px; text-align: center; }
.hero-content { max-width: 700px; margin: 0 auto; }

/* =========================================
   BADGE: VERSÃO SÓLIDA (SEU ESTILO)
   ========================================= */

/* =========================================
   BADGE PAVIO - REESCRITO DO ZERO
   Tecnica: circulo grande girando atras do conteudo, clippado pelo pill
   ========================================= */
.badge-new {
    position: relative;
    display: inline-flex;
    border-radius: 9999px;
    padding: 0;
    margin-bottom: 24px;
    text-decoration: none;
    overflow: hidden;
    background: #0b1120;
}

.badge-new::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    margin-top: -250px;
    margin-left: -250px;
    background: conic-gradient(
        from 0deg,
        transparent 0%,
        transparent 55%,
        rgba(59,130,246,0.08) 60%,
        rgba(59,130,246,0.25) 67%,
        #3b82f6 74%,
        #60a5fa 78%,
        #3b82f6 82%,
        rgba(59,130,246,0.25) 88%,
        rgba(59,130,246,0.08) 93%,
        transparent 100%
    );
    animation: badge-spin 3s linear infinite;
    z-index: 1;
}

.badge-content {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 20px;
    background: #0f1a2e;
    border-radius: 9999px;
    margin: 2px;
    font-size: 0.9rem;
    font-weight: 600;
    color: #60a5fa;
    white-space: nowrap;
}

.badge-content svg {
    width: 16px;
    height: 16px;
    color: #3b82f6;
    display: block;
    flex-shrink: 0;
}

@keyframes badge-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
.hero-section h1 {
    font-size: 3.5rem; font-weight: 800; letter-spacing: -1.5px; margin-bottom: 24px;
    background: linear-gradient(to right, #f1f5f9, #cbd5e1);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.hero-section p { font-size: 1.2rem; color: var(--text-light); margin-bottom: 40px; }

/* =========================================
   BOTÃO CTA (GRADIENTE & TAMANHO AJUSTADO)
   ========================================= */

.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    
    /* 1. Tamanho Reduzido */
    padding: 12px 32px; /* Reduzi de 16px 40px para ficar mais delicado */
    font-size: 1rem;    /* Reduzi levemente a fonte (antes 1.1rem) */
    
    /* 2. Background em Degradê (Vertical) */
    /* Vai do azul claro (#43b2ff) no topo para o azul da marca (#1988fe) na base */
    background: linear-gradient(180deg, #43b2ff 0%, #1988fe 100%);
    
    color: white;
    font-weight: 600;
    border-radius: 50px;
    
    /* Sombra suave azulada */
    box-shadow: 0 10px 25px -5px rgba(25, 136, 254, 0.4);
    transition: all 0.3s ease;
    border: none; /* Garante que não tenha borda padrão */
}

.btn-primary:hover {
    transform: translateY(-2px); /* Sobe um pouquinho menos que antes */
    
    /* No hover, clareamos um pouco o degradê para dar brilho */
    background: linear-gradient(180deg, #60c5ff 0%, #3b9eff 100%);
    
    box-shadow: 0 15px 30px -5px rgba(25, 136, 254, 0.5);
}
@keyframes pulse-btn {
    0% { box-shadow: 0 0 0 0 rgba(25, 136, 254, 0.4); }
    70% { box-shadow: 0 0 0 15px rgba(25, 136, 254, 0); }
    100% { box-shadow: 0 0 0 0 rgba(25, 136, 254, 0); }
}
.pulse { animation: pulse-btn 2s infinite; }
/* Reduzi de 0.8rem para 0.75rem e ajustei a margem */
.small-cta-note { 
    font-size: 0.75rem; 
    color: var(--text-light); 
    margin-top: 10px; /* Um pouco mais perto do botão */
    font-weight: 500; /* Levemente mais legível */
}
/* =========================================
   4. SIMULADOR (SVG ANIMADO)
   ========================================= */
.feature-block { margin-bottom: 20px; }

.glass-panel {
    background: rgba(19,28,49,0.7); backdrop-filter: blur(12px);
    border: 1px solid var(--border-color); border-radius: var(--radius-lg);
    padding: 60px; box-shadow: var(--shadow-soft);
    display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center;
}
.icon-glow {
    width: 60px; height: 60px; background: rgba(147,51,234,0.15); color: #9333ea;
    border-radius: 16px; display: flex; align-items: center; justify-content: center;
    font-size: 32px; margin-bottom: 24px;
}
.feature-text h2 { font-size: 2.2rem; margin-bottom: 16px; }
.stats-row { display: flex; gap: 40px; border-top: 1px solid var(--border-color); padding-top: 24px; }
.stat-item strong { font-size: 1.5rem; color: var(--primary); }

.graph-card { background: var(--bg-card); border-radius: 20px; padding: 24px; border: 1px solid rgba(255,255,255,0.08); }
.graph-header { display: flex; justify-content: space-between; margin-bottom: 20px; }
.tag-live { background: rgba(16,185,129,0.15); color: #166534; font-size: 0.75rem; padding: 4px 8px; border-radius: 4px; font-weight: 600; }
.graph-footer { text-align: center; font-size: 0.9rem; background: rgba(255,255,255,0.08); padding: 10px; border-radius: 8px; }

/* SVG Animation */
.graph-area-svg { height: 140px; width: 100%; position: relative; border-bottom: 1px solid var(--border-color); margin-bottom: 16px; overflow: visible; }
.graph-line-path { stroke-dasharray: 1000; stroke-dashoffset: 1000; transition: stroke-dashoffset 2.5s ease-out; }
.graph-fill { opacity: 0; transition: opacity 2s ease 1s; }
.point-anim { opacity: 0; transform: scale(0); transition: all 0.5s; transform-origin: center; }
.start-drawing .graph-line-path { stroke-dashoffset: 0; }
.start-drawing .graph-fill { opacity: 1; }
.start-drawing .point-anim.delay-1 { opacity: 1; transform: scale(1); transition-delay: 1s; }
.start-drawing .point-anim.delay-2 { opacity: 1; transform: scale(1); transition-delay: 2s; }
#scroll-marker { transition: opacity 0.3s ease-out; pointer-events: none; }

/* =========================================
   5. BENTO GRID (ESTRUTURA & CARDS)
   ========================================= */
/* Ajuste de Padding: 0 no topo para aproximar do elemento de cima */
.features-grid { padding: 0 0 60px; }

.grid-layout {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* Gap aumentado para 40px para evitar que cards fiquem colados */
    gap: 40px; 
    width: 100%;
}

.bento-card {
    background: var(--bg-card); border-radius: var(--radius-lg); padding: 24px;
    border: 1px solid var(--border-color); box-shadow: var(--shadow-soft);
    display: flex; flex-direction: column; justify-content: space-between;
    transition: all 0.3s ease; position: relative; overflow: hidden;
    height: 100%; min-height: 280px;
}
.bento-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-hover); }

.icon-bento { font-size: 1.8rem; color: var(--primary); background: var(--primary-soft); padding: 8px; border-radius: 10px; display: inline-block; margin-bottom: 16px; }
.card-text-top h3 { font-size: 1.15rem; margin-bottom: 8px; }
.card-text-top p { font-size: 0.9rem; color: var(--text-light); margin-bottom: 30px;}

/* Card: Cronograma */
.large-card {
    grid-column: span 2; grid-row: span 2;
    background: var(--bg-card);
    display: flex; flex-direction: row; align-items: center; gap: 30px; padding: 40px;
}
.large-card-content { flex: 1; z-index: 2; display: flex; flex-direction: column; justify-content: center; }
.large-card-content h3 { font-size: 1.8rem; color: var(--primary); margin-bottom: 12px; }
/* =========================================
   BOTÃO CRONOGRAMA (MAIS CHAMATIVO)
   ========================================= */

.link-arrow { 
    display: inline-flex; 
    align-items: center; 
    gap: 8px; 
    
    /* Fundo Branco e Texto Azul */
    background: transparent;
    color: var(--primary); /* Azul da marca */
    
    /* A BORDA AZUL */
    border: 2px solid var(--primary); 
    
    padding: 12px 28px; 
    border-radius: 50px; 
    font-weight: 800; /* Deixei mais grosso */
    font-size: 0.95rem;
    
    align-self: flex-start; 
    margin-top: 32px; 
    cursor: pointer;
    
    /* ANIMAÇÃO: Pulso constante chamando atenção */
    animation: bluePulse 2s infinite;
    transition: all 0.3s ease;
}

/* Efeito Hover (Inverte as cores) */
.link-arrow:hover { 
    background: var(--primary); 
    color: white; 
    transform: translateY(-3px); /* Sobe um pouquinho */
    box-shadow: 0 10px 25px -5px rgba(25, 136, 254, 0.4); /* Sombra forte */
    animation: none; /* Para o pulso ao interagir */
}

/* O Ícone da seta */
.link-arrow i {
    transition: transform 0.3s;
}
.link-arrow:hover i {
    transform: translateX(4px); /* Seta anda pra direita */
}

/* Keyframes da Animação de Pulso */
@keyframes bluePulse {
    0% {
        box-shadow: 0 0 0 0 rgba(25, 136, 254, 0.4);
    }
    70% {
        /* A sombra expande e fica transparente */
        box-shadow: 0 0 0 10px rgba(25, 136, 254, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(25, 136, 254, 0);
    }
}
.card-visual-side { flex: 1; display: flex; justify-content: center; }
.floating-cal-stack { position: relative; width: 200px; height: 160px; }
.cal-card { position: absolute; width: 100%; background: var(--bg-card); border-radius: 16px; padding: 16px; box-shadow: 0 10px 30px rgba(25, 136, 254, 0.15); display: flex; flex-direction: column; }
.c-back { top: 0; transform: scale(0.9) translateY(-20px); opacity: 0.6; filter: blur(1px); }
.c-mid { top: 20px; transform: scale(0.95) translateY(-10px); opacity: 0.8; }
.c-front { top: 40px; border-left: 4px solid var(--primary); animation: float-card 6s infinite ease-in-out; }
@keyframes float-card { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.cal-top { display: flex; gap: 8px; font-weight: 600; margin-bottom: 8px; color: var(--text-dark); }
.cal-bar { height: 6px; background: rgba(255,255,255,0.08); border-radius: 4px; overflow: hidden; margin-bottom: 8px; }
.cal-bar .fill { height: 100%; background: var(--primary); }
.cal-check { text-align: right; color: var(--primary); }

/* Card: Pomodoro (CORRIGIDO) */
.pomodoro-ui { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; padding-top: 10px; flex-grow: 1; }
.timer-ring-container { position: relative; width: 110px; height: 110px; display: flex; align-items: center; justify-content: center; margin-bottom: 15px; }
.progress-ring-circle { transform: rotate(-90deg); transform-origin: 50% 50%; }
.progress-ring__bar { transition: stroke-dashoffset 0.35s; stroke-linecap: round; }
.timer-display { position: absolute; font-weight: 700; font-size: 1.5rem; color: var(--text-dark); pointer-events: none; }
/* Botão estático para não sumir */
.btn-play-pause { position: static; width: 48px; height: 48px; background: var(--primary); color: white; border: none; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; box-shadow: 0 8px 20px rgba(25, 136, 254, 0.3); transition: 0.3s; }
.btn-play-pause:hover { transform: scale(1.1); }

/* Card: Revisão */
.notification-ui { display: flex; align-items: center; justify-content: center; flex-grow: 1; padding-top: 20px; }
.fake-notification { background: var(--bg-card); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; padding: 12px; width: 100%; box-shadow: 0 8px 20px rgba(0,0,0,0.06); display: flex; gap: 12px; animation: pop-in 0.5s; }
.notif-icon { width: 32px; height: 32px; background: rgba(239,68,68,0.15); color: #ef4444; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
@keyframes pop-in { from { transform: scale(0.8); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* Card: Sync */
.wide-card { grid-column: span 3; background: var(--bg-card); color: white; }
.dark-content-row { display: flex; align-items: center; justify-content: space-between; height: 100%; padding: 0 20px; }
.dark-theme h3 { color: white; } .dark-theme p { color: #94a3b8; }
.device-sync-visual { display: flex; align-items: center; gap: 20px; font-size: 2.5rem; color: var(--primary); }
.sync-symbol { animation: pulse-sync 2s infinite; }
@keyframes pulse-sync { 0%, 100% { opacity: 0.5; transform: scale(0.9); } 50% { opacity: 1; transform: scale(1.1); } }

/* =========================================
   6. ANÁLISES VISUAIS (GRÁFICOS)
   ========================================= */
/* Aumentei para 260px para caber o texto inteiro */
.slider-ui { width: 100%; height: 100%; position: relative; overflow: visible; min-height: 260px; display: flex; align-items: center; justify-content: center; }
.slider-container { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; position: relative; }
.slide { position: absolute; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; opacity: 0; transform: translateY(10px) scale(0.95); transition: 0.5s; pointer-events: none; }
.slide.active { opacity: 1; transform: translateY(0) scale(1); pointer-events: all; }
.chart-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: 10px 5px;
    justify-content: center;
}
/* Bar Chart - Layout e Texto */
.bar-layout { width: 100%; padding: 0 5px; }
.bar-header { display: flex; justify-content: space-between; width: 100%; margin-bottom: 5px; }
.bar-percent { font-weight: 800; color: var(--primary); }

/* =========================================
   CORREÇÃO DEFINITIVA V3: BARRA DE PROGRESSO
   (Corrigido o erro de sintaxe do comentário)
   ========================================= */

/* 1. O Container */
.progress-container { 
    width: 100%; 
    height: 12px; 
    background: rgba(255,255,255,0.08);
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    margin-top: 8px;
    display: block !important; 
}

/* 2. O Preenchimento (Barra Azul) */
.progress-fill { 
    height: 100%; 
    background: var(--primary); 
    border-radius: 10px; 
    
    /* NÃO TEM WIDTH AQUI! */
    /* Isso obriga o navegador a usar o style="width: 82%" do seu HTML */
    
    display: block !important;
    box-shadow: 0 2px 10px rgba(25, 136, 254, 0.3);
    
    /* Animação de Escala (Cresce de 0 a 100% do tamanho definido no HTML) */
    transform-origin: left center;
    transform: scaleX(0);          
    animation: revealBar 1.5s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
}

@keyframes revealBar {
    to { transform: scaleX(1); }
}

.bar-caption { text-align: right; font-size: 0.75rem; color: var(--text-light); margin-top: 5px; }
/* Heatmap */
.heatmap-grid { display: flex; gap: 4px; }
.h-col { display: flex; flex-direction: column; gap: 4px; }
.day { width: 12px; height: 12px; border-radius: 3px; }
.d0 { background: rgba(255,255,255,0.08); } .d1 { background: #93c5fd; } .d2 { background: #3b82f6; } .d3 { background: #1988fe; }
.chart-label-bottom { font-size: 0.85rem; font-weight: 600; display: flex; align-items: center; gap: 6px; background: rgba(255,255,255,0.08); padding: 6px 12px; border-radius: 20px; margin-top: 10px; }
.chart-label-bottom i { color: #f59e0b; }

/* =========================================
   CORREÇÃO FINAL: DONUT (POSIÇÃO + TEXTO)
   ========================================= */

.donut-performance { 
    position: relative; 
    width: 120px; 
    height: 120px; 
    
    /* AQUI ESTÁ A MUDANÇA: */
    /* Mudei de "0 auto 10px" para "30px auto 10px" */
    /* Esses 30px no topo empurram a rosca para baixo, afastando do título */
    margin: 30px auto 10px;
    
    overflow: visible !important; 
    z-index: 5;
}

/* O Elemento SVG */
.circular-chart-perf { 
    display: block; 
    width: 100%;
    height: 100%;
    overflow: visible !important; 
}

/* Fundos e Traços */
.circle-bg-perf { 
    fill: none; 
    stroke: rgba(255,255,255,0.08);
    stroke-width: 2.5; 
}

.circle-perf { 
    fill: none; 
    stroke: #10b981; 
    stroke-width: 2.5; 
    stroke-linecap: round; 
    stroke-dasharray: 76, 100; 
    filter: drop-shadow(0 0 6px rgba(16, 185, 129, 0.4)); 
}

/* Conteúdo Central (Texto Empilhado) */
.perf-content { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    
    width: 100%;
    line-height: 1; 
}

.perf-number { 
    font-size: 1.8rem; 
    font-weight: 800; 
    color: var(--text-dark);
    margin-bottom: 2px; 
}

.perf-label { 
    color: #10b981; 
    font-weight: 700; 
    font-size: 0.65rem; 
    text-transform: uppercase; 
    letter-spacing: 1px; 
}

/* Legenda */
.perf-legend { 
    display: flex; 
    justify-content: center; 
    gap: 15px; 
    font-size: 0.75rem; 
    width: 100%;
    margin-top: 5px;
}

.dot-leg { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 5px; }
.dot-leg.green { background: #10b981; } .dot-leg.red { background: #ef4444; }
/* 2. O Elemento SVG */
.circular-chart-perf { 
    display: block; 
    max-width: 100%; 
    
    /* Permite que o filtro (sombra) desenhe fora da caixa de 36x36 */
    overflow: visible !important; 
}

/* 3. O Fundo do Círculo (Cinza) */
.circle-bg-perf { 
    fill: none; 
    stroke: rgba(255,255,255,0.08);
    stroke-width: 3; 
}

/* 4. O Círculo Verde (Com a sombra) */
.circle-perf { 
    fill: none; 
    stroke: #10b981; 
    stroke-width: 3; 
    stroke-linecap: round; 
    stroke-dasharray: 76, 100; 
    
    /* Ajustei a sombra para ficar mais difusa e suave */
    filter: drop-shadow(0 0 6px rgba(16, 185, 129, 0.4)); 
}

/* Texto e Legenda (Mantém igual) */
.perf-number { font-size: 1.5rem; font-weight: 800; color: var(--text-dark); }
.perf-label { color: #10b981; font-weight: 700; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 1px; }
.perf-content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; }
.perf-legend { display: flex; gap: 15px; font-size: 0.75rem; }
.dot-leg { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 5px; }
.dot-leg.green { background: #10b981; } .dot-leg.red { background: #ef4444; }
/* Reviews */
/* =========================================
   AJUSTE DEPOIMENTOS (CORREÇÃO FINAL DE POSIÇÃO)
   ========================================= */

/* 1. Container do Slider: Alinha ao TOPO */
.slider-ui {
    width: 100%;
    height: 100%;
    min-height: 240px; /* Altura segura */
    position: relative;
    overflow: visible;
    display: flex;
    align-items: flex-start; /* O SEGREDO: Joga tudo para cima */
    justify-content: center;
    padding-top: 20px; /* Espacinho entre o título e o depoimento */
}

/* 2. Slide Individual: Remove centralização vertical */
.slide.review-slide {
    flex-direction: column;
    justify-content: flex-start; /* Começa do topo */
    text-align: center;
    width: 100%;
    top: 0; 
}

/* 3. Texto do Depoimento */
.review-text {
    font-style: italic;
    font-size: 0.95rem;
    color: var(--text-body);
    line-height: 1.5;
    margin-bottom: 20px; /* Espaço saudável até o usuário */
    margin-top: 0;
}

/* 4. Bloco do Usuário */
.user-info {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding-bottom: 10px;
    /* Removemos qualquer margem automática que empurrava para baixo */
}

/* 5. Avatar e Ícones */
.avatar {
    width: 44px; 
    height: 44px; 
    border-radius: 50%; 
    border: 2px solid var(--bg-card);
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.3rem;
    flex-shrink: 0; /* Garante que a bolinha não amasse */
}

/* Cores vibrantes */
.a1 { background: linear-gradient(135deg, #FFC107 0%, #FF9800 100%); }
.a2 { background: linear-gradient(135deg, #FF5722 0%, #E91E63 100%); }
.a3 { background: linear-gradient(135deg, #3F51B5 0%, #2196F3 100%); }

.user-meta {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.user-handle {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-dark);
    line-height: 1.2;
}

.user-course {
    font-size: 0.75rem;
    color: var(--text-light);
}
/* =========================================
   7. CTA & FOOTER
   ========================================= */
/* Ajuste de Padding: aproximar a CTA do grid */
.cta-final { padding: 40px 0 50px; }

.cta-card-glass {
    background: var(--primary); border-radius: 30px; padding: 80px 20px;
    text-align: center; color: white; position: relative; overflow: hidden;
    box-shadow: 0 20px 50px rgba(25, 136, 254, 0.4);
}
.cta-card-glass::before {
    content: ''; position: absolute; top: -50%; left: 0; width: 100%; height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, transparent 60%); pointer-events: none;
}
.cta-card-glass h2 { color: white; font-size: 2.5rem; margin-bottom: 20px; }
.cta-card-glass p { color: rgba(255,255,255,0.9); margin-bottom: 40px; }
.btn-primary.large { background: white; color: var(--primary); padding: 18px 48px; position: relative; z-index: 2; }
/* =========================================
   BENEFÍCIOS DO CTA (VISUAL MODERNO)
   ========================================= */

/* O Container da Linha */
.benefits-row {
    margin-top: 40px !important; /* Mais espaço do botão */
    display: flex !important;
    justify-content: center !important;
    gap: 40px !important; /* Espaço generoso entre os itens */
    flex-wrap: wrap !important; /* Garante que não quebre no mobile */
}

/* Cada Item Individual */
.b-item {
    display: flex;
    flex-direction: column; /* O SEGREDO: Empilha ícone e texto */
    align-items: center;
    gap: 8px; /* Distância entre o ícone e o texto */
    color: white;
}

/* Estilo dos Ícones */
.b-item i {
    font-size: 1.8rem; /* Ícone grande e visível */
    opacity: 1;        /* Branco total */
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1)); /* Sombra leve para destacar do azul */
    transition: transform 0.3s ease;
}

/* Estilo do Texto */
.b-item span {
    font-size: 0.85rem;
    font-weight: 500;
    opacity: 0.85; /* Levemente transparente para ficar elegante */
    letter-spacing: 0.3px;
}

/* Efeito Hover (Detalhe extra) */
.b-item:hover i {
    transform: translateY(-3px); /* Ícone flutua ao passar o mouse */
}

/* Ajuste Mobile para não ficar espremido */
@media (max-width: 768px) {
    .benefits-row {
        gap: 20px !important; /* Aproxima um pouco no celular */
    }
    .b-item span {
        font-size: 0.75rem; /* Texto um pouco menor */
    }
    .b-item i {
        font-size: 1.5rem;
    }
}

footer { padding: 40px 0; border-top: 1px solid var(--border-color); text-align: center; color: var(--text-light); }


/* =========================================
   8. RESPONSIVIDADE BLINDADA (MOBILE)
   ========================================= */
@media (max-width: 1024px) {

    /* FORÇA MARGEM LATERAL */
    .container {
        padding-left: 24px !important;
        padding-right: 24px !important;
        width: 100% !important;
    }

    /* FORÇA ESPAÇAMENTO VERTICAL (40px entre cards) */
    .grid-layout {
        display: flex;
        flex-direction: column;
        gap: 40px !important; 
        margin-top: 0;
    }

    /* REMOVE BURACO DO TOPO */
    .features-grid {
        padding-top: 0 !important;
    }

    /* RESET CARDS */
    .bento-card, .large-card, .wide-card, .dark-theme {
        width: 100% !important;
        margin: 0 !important;
        min-height: auto;
        grid-column: auto !important;
        border-radius: var(--radius-lg) !important;
        padding: 24px !important;
    }

    /* CRONOGRAMA MOBILE */
    .large-card {
        flex-direction: column;
        text-align: center;
        padding: 24px 16px;
        gap: 20px;
    }
    .large-card-content { padding-right: 0; align-items: center; }
    .large-card-content .link-arrow { align-self: center; }
    .card-visual-side { width: 100%; }
    .planner-wrapper { max-width: 100%; }
    .planner-list { padding-left: 30px; padding-right: 2px; }
    .planner-item { padding: 7px 8px; gap: 5px; }
    .p-subject { font-size: 0.75rem; }
    .p-activity { font-size: 0.6rem; padding: 2px 5px; }
    .p-time { font-size: 0.65rem; padding: 3px 6px; }

    /* SYNC MOBILE */
    .dark-content-row { flex-direction: column; text-align: center; gap: 10px; padding: 20px; }
    .device-sync-visual { transform: scale(0.9); margin-top: 10px; }

    /* SIMULADOR MOBILE */
    .glass-panel { grid-template-columns: 1fr; padding: 40px 20px; text-align: center; }
    .stats-row { justify-content: center; }
    .icon-glow { margin: 0 auto 20px; }

    /* FONTES MOBILE */
    .hero-section h1 { font-size: 2.2rem; }
    .cta-card-glass h2 { font-size: 2rem; }
}

/* =========================================
   CORREÇÃO: CARD ANÁLISES VISUAIS
   ========================================= */

/* 1. Ajuste do Container do Slider */
/* O problema era o min-height: 260px conflitanto com o texto */
.visual-element.slider-ui {
    min-height: 200px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 0;
}

/* 2. Ajuste Específico do Slider de Metas */
#metas-slider {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 3. Ajuste dos Slides (Gráficos) */
#metas-slider .slide {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

/* AJUSTE: POSICIONAMENTO DOS GRÁFICOS */
#metas-slider .chart-box {
    padding: 10px 5px !important;
    justify-content: center;
}

/* 2. BARRA DE PROGRESSO (Preenchimento Correto) */
/* 3. DEPOIMENTOS (Empurra para CIMA) */
/* Garante que o texto comece logo abaixo do título */
#reviews-slider .slide {
    justify-content: flex-start !important; /* Alinha no topo */
    padding-top: 20px; /* Pequeno respiro do título */
}

/* Ajuste de altura para caber o texto */
.slider-ui {
    min-height: 260px !important; /* Altura segura para não cortar */
}
/* =========================================
   CORREÇÃO: CARD DEPOIMENTOS (REVIEWS)
   ========================================= */

/* 1. Reseta o alinhamento especificamente para reviews */
/* A classe .review-container-height já existe no seu HTML */
.visual-element.slider-ui.review-container-height {
    align-items: flex-start !important; /* Alinha no TOPO, ao contrário do gráfico */
    justify-content: flex-start !important;
    margin-top: 10px !important; /* Remove o empurrão grande para baixo */
    min-height: 220px !important; /* Garante altura suficiente para o texto */
    padding-bottom: 0 !important;
}

/* 2. Posiciona os slides de texto no topo */
#reviews-slider .slide {
    position: absolute; 
    top: 0 !important;      /* Cola no topo */
    bottom: auto !important; /* Solta o fundo */
    height: 100%;
    width: 100%;
    
    display: flex;
    flex-direction: column;
    justify-content: flex-start !important; 
    align-items: center;
    padding-top: 0;
}

/* 3. Ajuste de margem para o texto não colar no título */
#reviews-slider .review-text {
    margin-top: 10px;
    margin-bottom: 15px;
}
/* =========================================
   CORREÇÃO DEFINITIVA V3: CRONOGRAMA
   ========================================= */

/* 1. Container que segura o Planner dentro do Card */
.card-visual-side {
    display: flex;
    justify-content: center; /* Centraliza horizontalmente */
    align-items: center;     /* Centraliza verticalmente */
    overflow: visible;       /* Permite ver sombras */
    padding: 0;
}

/* 2. O Wrapper do Cronograma (Tamanho Travado) */
.planner-wrapper {
    position: relative;
    width: 100%;
    max-width: 100%;
    height: 220px;
    flex-shrink: 0;
    margin: 0 auto;
}

/* 3. A Linha Vertical (Timeline) */
.timeline-line {
    position: absolute;
    left: 9px;       /* Exatamente no meio da bolinha (20px / 2 - 1px) */
    top: 25px;       /* Começa logo abaixo do topo */
    bottom: 10px;
    width: 2px;
    background: var(--border-color);
    z-index: 0;
}

/* 4. O Slider (Área de conteúdo) */
#planner-slider {
    width: 100%;
    height: 100%;
    position: relative;
}

/* 5. O Slide Individual (Dia) */
#planner-slider .slide.planner-slide {
    position: absolute;
    top: 0 !important;
    left: 0 !important;
    width: 100%;
    height: 100%;
    
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: stretch !important; /* Estica itens até a borda */
    padding: 0 !important;
    text-align: left !important;
}

/* 6. Cabeçalho (Dia da Semana) */
.planner-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 15px;
    position: relative;
    z-index: 1;
}

.planner-header .dot-day {
    width: 20px;
    height: 20px;
    border: 4px solid rgba(25,136,254,0.3);
    background: var(--primary);
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 0 0 3px var(--bg-card); /* Borda para apagar a linha atrás */
}

.planner-header span {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-dark);
}

/* 7. Lista de Itens (Matérias) */
.planner-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    padding-left: 32px;
    padding-right: 4px;
    box-sizing: border-box;
}

/* 8. Item Individual (Card Branco) */
.planner-item {
    background: var(--bg-card);
    border-radius: 10px;
    padding: 8px 10px;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    border: 1px solid rgba(255,255,255,0.08);
    width: 100%;
    position: relative;
    z-index: 2;
}

/* Barra Colorida */
.p-indicator {
    width: 4px;
    height: 20px;
    border-radius: 4px;
    flex-shrink: 0; /* Não deixa sumir */
}

/* Nome da Matéria */
.p-subject {
    flex: 1;
    min-width: 0;
    font-size: 0.8rem;
    font-weight: 600;
    color: #e2e8f0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
}

/* Pílula de Tempo */
.p-time {
    background: rgba(255,255,255,0.08);
    color: #94a3b8;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 6px;
    white-space: nowrap;
}

.p-activity {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--primary);
    background: rgba(25, 136, 254, 0.1);
    padding: 3px 8px;
    border-radius: 6px;
    white-space: nowrap;
    margin-left: auto;
}
.p-activity i {
    font-size: 0.75rem;
}

/* Cores */
.p-indicator.blue { background: #3b82f6; }
.p-indicator.green { background: #10b981; }
.p-indicator.purple { background: #8b5cf6; }
.p-indicator.orange { background: #f59e0b; }
.p-indicator.gray { background: #94a3b8; }

/* =========================================
   CORREÇÃO V4: NOTIFICAÇÃO (SEM CORTAR SOMBRA)
   ========================================= */

/* 1. O Container Visual */
.visual-element.notification-ui {
    min-height: 180px; 
    height: auto;
    display: block;
    position: relative;
    padding: 0;
    
    /* ADICIONEI ESTA LINHA: */
    margin-top: 20px; /* Cria o espaço entre o texto e a notificação */
    
    overflow: visible !important;
    z-index: 10;
}

/* 2. O Wrapper do Slider */
#notification-slider {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    overflow: visible !important; /* Reforça a visibilidade */
}

/* 3. O Slide Individual */
.notification-slide {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    
    /* Estado INATIVO */
    transform: translate(-50%, calc(-50% + 20px)) scale(0.9) !important;
    opacity: 0;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    
    /* Aumentei o padding para afastar o card das bordas do Bento Grid */
    padding: 10px; 
}

/* Estado ATIVO */
.notification-slide.active {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1) !important;
}

/* 4. O Card da Notificação */
.ios-notification {
    background: rgba(19, 28, 49, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    
    width: 100% !important;
    max-width: 100% !important; /* Remove travas de largura */
    /* Mantemos apenas uma margem lateral visual se necessário */
    margin: 0 auto;
    box-sizing: border-box;
    
    padding: 16px 20px; /* Mais espaço nas laterais internas */
    border-radius: 20px;
    
    box-shadow: 
        0 15px 35px -5px rgba(0, 0, 0, 0.1), 
        0 5px 15px -5px rgba(0, 0, 0, 0.05); 
        
    border: 1px solid var(--border-color);
    position: relative;
}

/* (O restante dos estilos internos continua igual) */
.notif-header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.app-icon { width: 24px; height: 24px; background: linear-gradient(135deg, var(--primary), #60a5fa); border-radius: 6px; display: flex; align-items: center; justify-content: center; color: white; font-size: 14px; box-shadow: 0 2px 5px rgba(25, 136, 254, 0.3); }
.app-name { font-weight: 700; color: #94a3b8; letter-spacing: 0.5px; text-transform: uppercase; font-size: 0.75rem; flex: 1; }
.time-ago { color: #94a3b8; font-size: 0.75rem; font-weight: 600; }
.notif-body { display: flex; flex-direction: column; gap: 6px; }
.notif-title { font-weight: 700; color: #f1f5f9; font-size: 1rem; }
.notif-msg { font-size: 0.9rem; color: #cbd5e1; line-height: 1.5; margin: 0; }
.notif-msg strong { color: var(--primary); font-weight: 700; }

/* =========================================
   FLASHCARDS COM IA (INTERATIVO)
   ========================================= */

.visual-element.flashcard-ui {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 15px 10px 10px;
    height: 100%;
    gap: 12px;
    perspective: 800px;
}

.flashcard-deck-wrapper {
    position: relative;
    width: 100%;
    max-width: 280px;
    height: 190px;
    perspective: 800px;
}

.flashcard-shadow-card {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 16px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
}
.flashcard-shadow-card.shadow-2 {
    transform: rotate(3.5deg) translateY(4px) scale(0.95);
    opacity: 0.3;
}
.flashcard-shadow-card.shadow-1 {
    transform: rotate(-2deg) translateY(2px) scale(0.97);
    opacity: 0.5;
}

.flashcard-flip-container {
    position: relative;
    width: 100%;
    height: 100%;
    cursor: pointer;
    transition: transform 0.15s ease;
    z-index: 2;
}
.flashcard-flip-container:active {
    transform: scale(0.97);
}

.flashcard-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    transform-style: preserve-3d;
}

.flashcard-flip-container.flipped .flashcard-inner {
    transform: rotateY(180deg);
}

.flashcard-front,
.flashcard-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px 18px;
    text-align: center;
}

.flashcard-front {
    background: linear-gradient(145deg, #1a2540 0%, #131c31 100%);
    border: 1.5px solid rgba(25,136,254,0.2);
    box-shadow: 0 8px 25px -5px rgba(25, 136, 254, 0.12), 0 0 0 1px rgba(25, 136, 254, 0.04);
}

.flashcard-back {
    background: linear-gradient(145deg, #1e293b 0%, #0f172a 100%);
    border: 1.5px solid #334155;
    transform: rotateY(180deg);
    box-shadow: 0 8px 25px -5px rgba(0, 0, 0, 0.25);
}

.fc-category {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--primary);
    background: rgba(25, 136, 254, 0.1);
    padding: 4px 12px;
    border-radius: 20px;
    margin-bottom: 12px;
}
.fc-category-back {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #38bdf8;
    background: rgba(56, 189, 248, 0.1);
    padding: 4px 12px;
    border-radius: 20px;
    margin-bottom: 10px;
}

.fc-question {
    font-family: 'Poppins', sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    color: #f1f5f9;
    line-height: 1.4;
    margin-bottom: auto;
}

.fc-tap-hint {
    font-size: 0.72rem;
    color: #94a3b8;
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: auto;
    animation: fc-pulse-hint 2s infinite ease-in-out;
}
@keyframes fc-pulse-hint {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

.fc-answer {
    font-size: 0.88rem;
    color: #e2e8f0;
    line-height: 1.5;
    font-weight: 400;
    margin-bottom: 14px;
}

.fc-confidence-row {
    display: flex;
    gap: 6px;
    width: 100%;
    margin-top: auto;
}
.fc-btn {
    flex: 1;
    padding: 7px 4px;
    border: none;
    border-radius: 10px;
    font-size: 0.68rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    transition: all 0.2s;
    letter-spacing: 0.3px;
}
.fc-btn i { font-size: 0.8rem; }

.fc-btn-fail { background: rgba(239, 68, 68, 0.15); color: #f87171; }
.fc-btn-fail:hover { background: rgba(239, 68, 68, 0.3); }
.fc-btn-hard { background: rgba(251, 191, 36, 0.15); color: #fbbf24; }
.fc-btn-hard:hover { background: rgba(251, 191, 36, 0.3); }
.fc-btn-easy { background: rgba(34, 197, 94, 0.15); color: #4ade80; }
.fc-btn-easy:hover { background: rgba(34, 197, 94, 0.3); }
.fc-btn-pressed { transform: scale(0.9); }

.fc-progress-bar {
    width: 100%;
    max-width: 280px;
    height: 4px;
    background: rgba(255,255,255,0.08);
    border-radius: 10px;
    overflow: hidden;
}
.fc-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), #38bdf8);
    border-radius: 10px;
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.fc-counter {
    font-size: 0.75rem;
    color: #94a3b8;
    font-weight: 600;
}

.fc-exit .flashcard-inner {
    animation: fc-slide-out 0.25s ease-in forwards;
}
.fc-enter .flashcard-inner {
    animation: fc-slide-in 0.35s ease-out forwards;
}

@keyframes fc-slide-out {
    0% { transform: translateX(0) scale(1); opacity: 1; }
    100% { transform: translateX(-30px) scale(0.95); opacity: 0; }
}
@keyframes fc-slide-in {
    0% { transform: translateX(30px) scale(0.95); opacity: 0; }
    100% { transform: translateX(0) scale(1); opacity: 1; }
}

/* =========================================
   FORÇAR REDUÇÃO DO BOTÃO HERO & NOTA
   ========================================= */

/* 1. Botão "Garantir meu acesso agora" */
.hero-cta .btn-primary {
    /* Tamanho bem mais compacto */
    padding: 10px 28px !important; 
    font-size: 0.95rem !important; 
    
    /* O Gradiente Solicitado (#43b2ff -> #1988fe) */
    background: linear-gradient(180deg, #43b2ff 0%, #1988fe 100%) !important;
    
    border-radius: 50px;
    box-shadow: 0 10px 25px -5px rgba(25, 136, 254, 0.4);
    border: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Efeito Hover do botão */
.hero-cta .btn-primary:hover {
    transform: translateY(-2px) !important;
    /* Clareia o gradiente no hover */
    background: linear-gradient(180deg, #6ecbff 0%, #3b9eff 100%) !important;
    box-shadow: 0 15px 30px -5px rgba(25, 136, 254, 0.5);
}

/* 2. Texto "Oferta por tempo limitado" */
.small-cta-note {
    font-size: 0.7rem !important; /* Reduzi ainda mais */
    color: var(--text-light);
    margin-top: 8px !important; /* Mais colado no botão */
    font-weight: 500;
    opacity: 0.8;
}
/* =========================================
   CARD PLANNER: SCROLL INFINITO & MÁSCARAS
   ========================================= */

.bento-card.planner-section {
    grid-column: span 3; 
    background: var(--bg-card);
    padding: 24px;
    overflow: hidden;
}

.planner-content-side {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
}

/* 1. Janela de Visualização (Onde a mágica do Blur acontece) */
.planner-scroll-window {
    height: 320px; /* Altura fixa visível: mostra ~3 cards por vez */
    position: relative;
    overflow: hidden; /* Corta o que sai da área */
    margin-top: 20px;
    
    /* A MÁSCARA DE DESFOQUE (FADE) */
    /* Transparente no topo, sólido no meio, transparente embaixo */
    /* Isso faz os cards aparecerem e sumirem suavemente */
    mask-image: linear-gradient(
        to bottom, 
        transparent 0%, 
        black 15%, 
        black 85%, 
        transparent 100%
    );
    -webkit-mask-image: linear-gradient(
        to bottom, 
        transparent 0%, 
        black 15%, 
        black 85%, 
        transparent 100%
    );
}

/* 2. O Wrapper que se move */
.scrolling-wrapper {
    display: flex;
    flex-direction: column;
    /* A animação move o wrapper para cima infinitamente */
    animation: scrollVertical 25s linear infinite; 
}

/* Pausa a rolagem quando o mouse passa por cima (UX boa) */
.scrolling-wrapper:hover {
    animation-play-state: paused;
}

/* 3. Grupo de Cards (Bloco de conteúdo) */
.cards-group {
    display: flex;
    flex-direction: column;
    gap: 12px; /* Espaço entre cards */
    padding-bottom: 12px; /* Mantém o ritmo entre o fim do grupo 1 e começo do grupo 2 */
}

/* 4. Estilo do Card Individual (Compacto) */
.study-topic-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 12px 14px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.03);
    transition: transform 0.2s, box-shadow 0.2s;
}
.study-topic-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
    border-color: #cbd5e1;
}

/* Elementos internos do Card (Mantidos do seu gosto) */
.topic-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; gap: 12px; }
.topic-title-group { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; overflow: hidden; }
.topic-name { font-weight: 700; color: var(--text-dark); font-size: 0.85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Tags Coloridas */
.topic-tag { font-size: 0.65rem; padding: 2px 6px; border-radius: 4px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; }
.topic-tag.purple { background: rgba(147,51,234,0.15); color: #a78bfa; }
.topic-tag.orange { background: rgba(245,158,11,0.15); color: #fbbf24; }
.topic-tag.blue { background: rgba(25,136,254,0.15); color: #60a5fa; }
.topic-tag.green { background: rgba(16,185,129,0.15); color: #34d399; }

/* Botão Revisei */
.btn-check-topic { background: var(--primary); color: white; border: none; padding: 4px 10px; border-radius: 6px; font-weight: 600; font-size: 0.7rem; display: flex; align-items: center; gap: 4px; cursor: pointer; transition: 0.2s; white-space: nowrap; flex-shrink: 0; }
.btn-check-topic:hover { background: var(--primary-hover); transform: scale(1.05); }

/* Metadados */
.topic-meta { display: flex; gap: 15px; font-size: 0.75rem; color: var(--text-light); margin-bottom: 8px; }
.meta-item { display: flex; align-items: center; gap: 4px; }
.meta-item.highlight { color: var(--primary); font-weight: 600; }

/* Barra de Progresso Compacta */
.topic-progress-row { width: 100%; display: flex; align-items: center; }
.p-bar-track { width: 100%; height: 6px; background: rgba(255,255,255,0.08); border-radius: 3px; overflow: hidden; }
.p-bar-fill { height: 100%; background: linear-gradient(90deg, #3b82f6, #2563eb); border-radius: 3px; }

/* 5. A Animação do Loop Infinito */
@keyframes scrollVertical {
    0% { transform: translateY(0); }
    /* Move para cima exatamente 50% (o tamanho de um grupo de cards) */
    100% { transform: translateY(-50%); } 
}

/* Responsividade */
@media (max-width: 768px) {
    .topic-title-group { flex-direction: column; align-items: flex-start; gap: 2px; }
    .topic-header { align-items: flex-start; }
    .btn-check-topic { align-self: flex-start; }
}
/* =========================================
   NOVO CARD: DEPOIMENTOS (SCROLL INFINITO)
   ========================================= */

/* 1. Container Principal */
.reviews-scroll-ui {
    width: 100%;
    height: 100%;
    min-height: 280px; /* Garante altura para a rolagem */
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Empurra para baixo se sobrar espaço */
    padding-top: 10px;
}

/* 2. Janela de Visualização (Máscara) */
.reviews-window {
    width: 100%;
    height: 260px; /* Altura visível */
    position: relative;
    overflow: hidden;
    
    /* MÁSCARA DE FADE (BLUR): */
    /* Cria o efeito de desaparecer suavemente no topo e na base */
    mask-image: linear-gradient(
        to bottom, 
        transparent 0%, 
        black 15%, 
        black 85%, 
        transparent 100%
    );
    -webkit-mask-image: linear-gradient(
        to bottom, 
        transparent 0%, 
        black 15%, 
        black 85%, 
        transparent 100%
    );
}

/* 3. A Trilha que se move */
.reviews-track {
    display: flex;
    flex-direction: column;
    /* Animação lenta e contínua */
    animation: scrollReviews 40s linear infinite; 
}

/* Pausa ao passar o mouse para ler */
.reviews-window:hover .reviews-track {
    animation-play-state: paused;
}

/* 4. Grupo de Reviews */
.reviews-group {
    display: flex;
    flex-direction: column;
    gap: 12px; /* Espaço entre os balões */
    padding-bottom: 12px; /* Espaço entre o fim de um grupo e começo do outro */
}

/* 5. O Balão de Depoimento (Card Individual) */
.review-bubble {
    background: var(--bg-card);
    border: 1px solid rgba(255,255,255,0.08);
    padding: 12px 16px;
    border-radius: 16px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.03);
    transition: transform 0.2s;
    margin: 0 4px; /* Margem lateral para a sombra não cortar */
}

.review-bubble:hover {
    transform: scale(1.02);
    box-shadow: 0 8px 15px rgba(0,0,0,0.06);
    border-color: #e2e8f0;
}

/* Cabeçalho do Usuário */
.rb-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

/* Avatares com Gradientes */
.rb-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.1rem;
    flex-shrink: 0;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* Cores variadas para parecer orgânico */
.g1 { background: linear-gradient(135deg, #FF512F, #DD2476); } /* Rosa/Vermelho */
.g2 { background: linear-gradient(135deg, #1988fe, #43b2ff); } /* Azul Marca */
.g3 { background: linear-gradient(135deg, #10b981, #34d399); } /* Verde */
.g4 { background: linear-gradient(135deg, #8b5cf6, #a78bfa); } /* Roxo */
.g5 { background: linear-gradient(135deg, #f59e0b, #fbbf24); } /* Laranja */
.g6 { background: linear-gradient(135deg, #ec4899, #f472b6); } /* Pink */

/* Texto do Usuário */
.rb-meta {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.rb-meta strong {
    font-size: 0.85rem;
    color: var(--text-dark);
}

.rb-meta span {
    font-size: 0.7rem;
    color: var(--text-light);
}

/* O Texto do Depoimento */
.review-bubble p {
    font-size: 0.85rem;
    color: var(--text-body);
    font-style: italic;
    line-height: 1.4;
    margin: 0;
}

/* 6. A Animação Infinita */
@keyframes scrollReviews {
    0% { transform: translateY(0); }
    /* Move exatamente 50% para cima (o tamanho de um grupo) */
    100% { transform: translateY(-50%); } 
}

/* Ajuste Mobile */
@media (max-width: 768px) {
    .reviews-window { height: 240px; }
}
/* =========================================
   SETA INDICADORA DE SCROLL (ANIMADA)
   ========================================= */

/* 1. O Container Principal (Espaçamento Reduzido) */
.scroll-indicator-container {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* MUDANÇA: Reduzi de "60px 0 20px" para apenas "10px 0" */
    /* Isso remove o buraco, já que as seções acima e abaixo já têm margens */
    padding: 10px 0; 
    
    cursor: pointer;
    position: relative;
    z-index: 5; /* Garante que fique clicável */
}

/* 2. O Wrapper que segura as setas */
.scroll-arrow-wrapper {
    position: relative;
    width: 40px;
    height: 60px;
    display: flex;
    justify-content: center;
    /* Animação padrão: flutuando suavemente */
    animation: floatArrow 2s ease-in-out infinite;
    /* Transição suave para quando o mouse entrar/sair */
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* 3. O Ícone da Seta Principal */
.arrow-icon {
    color: var(--primary); /* Cor azul da marca */
    position: absolute;
    top: 0;
    filter: drop-shadow(0 4px 8px rgba(25, 136, 254, 0.3)); /* Sombra suave */
    transition: all 0.3s ease;
}

/* 4. A Seta "Fantasma" (Rastro) */
/* Fica atrás e é mais transparente, criando profundidade */
.arrow-icon.ghost {
    top: -15px; /* Começa um pouco acima */
    opacity: 0.3;
    filter: blur(2px); /* Leve desfoque */
    transform: scale(0.9); /* Um pouco menor */
    transition: all 0.4s ease; /* Move-se em tempo diferente para efeito orgânico */
}

/* --- INTERAÇÃO (HOVER) --- */

/* Quando passa o mouse no container inteiro */
.scroll-indicator-container:hover .scroll-arrow-wrapper {
    /* Pausa a flutuação e estica para baixo */
    animation-play-state: paused;
    transform: translateY(15px) scaleY(1.1); /* Desce e estica elasticamente */
}

/* A seta principal fica mais escura e nítida */
.scroll-indicator-container:hover .arrow-icon {
    color: var(--primary-hover);
    filter: drop-shadow(0 8px 12px rgba(25, 136, 254, 0.4));
}

/* A seta fantasma se junta à principal */
.scroll-indicator-container:hover .arrow-icon.ghost {
    top: 0; /* Encontra a seta principal */
    opacity: 0.6; /* Fica mais visível */
    filter: blur(0px); /* Fica nítida */
    transform: scale(1);
}

/* --- ANIMAÇÃO DE FLUTUAÇÃO (IDLE) --- */
@keyframes floatArrow {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        /* Sobe um pouquinho */
        transform: translateY(-10px);
    }
}
/* =========================================
   CORREÇÃO FINAL: ESPAÇAMENTO DA SETA
   ========================================= */

/* 1. Ajuste da Seta para ficar mais próxima do conteúdo abaixo */
.scroll-indicator-container {
    padding-top: 10px !important;
    padding-bottom: 0 !important; /* Removemos o espaço de baixo da seta */
    margin-bottom: 0px; /* Apenas um pequeno respiro */
}

/* 2. Ajuste da Seção CTA (Garantir meu acesso) */
/* Removemos o padding de 40px do topo para a seta conectar melhor */
.cta-final {
    padding-top: 0 !important; 
    margin-top: 0 !important;
}

/* =========================================
   AJUSTE FINAL: REMOVER ESPAÇO ACIMA DA SETA
   ========================================= */

/* 1. Reduz o espaço inferior da grade de cards (Bento Grid) */
.features-grid {
    /* Reduzi de 60px para 10px. Isso traz a seta para perto. */
    padding-bottom: 40px !important; 
}

/* 2. Zera qualquer espaço acima da seta */
.scroll-indicator-container {
    padding-top: 0 !important;
    margin-top: 0 !important;
    
    /* Mantém o ajuste de baixo que já fizemos */
    padding-bottom: 0 !important;
    margin-bottom: 10px;
}

/* =========================================
   AJUSTE FINAL DESKTOP: ANÁLISES VISUAIS (ZOOM & POSIÇÃO)
   ========================================= */
@media (min-width: 1024px) {

    /* 1. Ajuste do Container Geral */
    .visual-element.slider-ui {
        align-items: center !important;
        justify-content: center !important;
        padding: 10px 0 !important;
    }

    /* 2. Aumentar os Gráficos (Zoom) */
    #metas-slider .slide.active {
        transform: scale(1.15) !important;
        transform-origin: center center !important;
    }
    /* Reduzimos a largura física para compensar o Zoom visual */
    #metas-slider .slide .bar-layout {
        width: 80% !important;
        margin: 0 auto !important;
    }
    /* Ajuste de segurança para o texto não colar nas bordas */
    #metas-slider .bar-header,
    #metas-slider .bar-caption {
        padding: 0 5px;
    }

    /* 3. Ajuste Específico para o Donut (Rosca) */
    #metas-slider .slide:nth-child(3).active {
        transform: scale(1.25) !important;
    }

    /* 4. Resetar paddings internos que atrapalham no desktop */
    #metas-slider .chart-box {
        padding: 10px 5px !important;
        justify-content: center !important;
    }
}
/* =========================================
   CORREÇÃO MOBILE: LOGO E BADGE
   ========================================= */
@media (max-width: 1024px) {
    
    /* 1. Ajuste do Cabeçalho (Logo) */
    .simple-header {
        /* Aumentei o topo para 60px (era 24px) -> Logo desce */
        padding-top: 60px !important; 
        
        /* Reduzi a base para 0px (era 24px) -> Aproxima da badge */
        padding-bottom:16px !important; 
    }

    /* 2. Ajuste da Seção Hero (Badge) */
    .hero-section {
        /* Reduzi o topo para 30px (era 60px) -> Badge sobe */
        padding-top: 40px !important; 
    }
}
/* =========================================
   CORREÇÃO: GRADIENTE LIMPO (SEM BORDAS)
   ========================================= */

.text-blue-gradient {
    /* 1. O Gradiente Vibrante */
    background-image: linear-gradient(180deg, #43b2ff 0%, #1988fe 100%) !important;
    
    /* 2. Aplicação no Texto */
    -webkit-background-clip: text !important;
    background-clip: text !important;
    
    /* 3. Transparência para mostrar o fundo */
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    
    /* 4. A LIMPEZA (Remove o "mini traçado") */
    -webkit-text-stroke: 0 !important; /* Garante que não tenha traço */
    text-shadow: none !important;      /* Remove sombras que parecem bordas */
    
    /* 5. Ajuste de Renderização */
    display: inline-block; /* Ajuda o navegador a calcular o recorte */
    padding-bottom: 0.1em; /* Evita cortar a "perninha" do "ç" e "p" */
    
    /* Opcional: Filtro para suavizar levemente se a fonte for muito dura */
    filter: drop-shadow(0 0 1px rgba(25, 136, 254, 0.1)); 
}
/* =========================================
   FOOTER ESTILO MENTORIS
   ========================================= */

.site-footer {
    background-color: var(--bg-card);
    border-top: 1px solid var(--border-color);
    padding: 80px 0 40px;
    margin-top: 60px; /* Separação da seção anterior */
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr; /* Coluna da marca é maior */
    gap: 60px;
    margin-bottom: 60px;
}

/* Coluna da Marca */
.footer-logo {
    margin-bottom: 20px;
}

.logo-text {
    font-family: 'Poppins', sans-serif;
    font-weight: 800;
    font-size: 1.5rem;
    color: var(--primary); /* Azul da marca */
    letter-spacing: -0.5px;
}

.footer-desc {
    color: var(--text-light);
    font-size: 0.95rem;
    line-height: 1.6;
    max-width: 320px;
    margin-bottom: 24px;
}

/* Link "Já é cliente?" */
.link-login {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-dark);
    transition: all 0.2s;
}

.link-login span {
    color: var(--primary);
}

.link-login:hover {
    gap: 10px; /* Efeito de seta andando */
    opacity: 0.8;
}

/* Colunas de Links */
.footer-col h4 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 24px;
}

.footer-links {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.footer-links a {
    color: var(--text-light);
    font-size: 0.95rem;
    font-weight: 500;
    transition: color 0.2s;
}

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

/* Barra Inferior (Copyright) */
.footer-bottom {
    border-top: 1px solid var(--border-color);
    padding-top: 30px;
    text-align: left;
}

.footer-bottom p {
    color: #94a3b8; /* Cinza bem claro */
    font-size: 0.85rem;
}

/* RESPONSIVIDADE (MOBILE) */
@media (max-width: 768px) {
    .site-footer {
        padding: 60px 0 30px;
    }

    .footer-grid {
        grid-template-columns: 1fr; /* Tudo em uma coluna */
        gap: 40px;
        text-align: center;
    }

    .footer-desc {
        margin: 0 auto 24px; /* Centraliza o texto */
    }

    .link-login {
        justify-content: center;
    }
}
/* =========================================
   CARD: ÁREAS DE ESTUDO (SCROLL HORIZONTAL)
   ========================================= */

/* 1. O Card (Largo) */
.bento-card.areas-section {
    grid-column: span 3; /* Ocupa a largura total do grid */
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 30px 0; /* Padding vertical, horizontal zerado para o scroll vazar */
    overflow: hidden;
    background: var(--bg-card);
    min-height: auto !important; /* Altura ajustável ao conteúdo */
}

/* Header centralizado */
.areas-header {
    text-align: center;
    padding: 0 24px 24px; /* Padding só aqui para o texto não colar na borda */
}
.areas-header h3 { font-size: 1.5rem; margin-bottom: 8px; }
.areas-header p { color: var(--text-light); font-size: 0.95rem; }

/* 2. Janela de Visualização (Máscara Lateral) */
.areas-scroll-window {
    width: 100%;
    overflow: hidden;
    position: relative;
    
    /* MÁSCARA: Fade nas laterais esquerda e direita */
    mask-image: linear-gradient(
        to right, 
        transparent 0%, 
        black 10%, 
        black 90%, 
        transparent 100%
    );
    -webkit-mask-image: linear-gradient(
        to right, 
        transparent 0%, 
        black 10%, 
        black 90%, 
        transparent 100%
    );
}

/* 3. A Trilha que se move */
.areas-track {
    display: flex;
    width: max-content; /* Permite que cresça horizontalmente */
    animation: scrollHorizontal 20s linear infinite;
}

/* Pausa no Hover */
.areas-track:hover {
    animation-play-state: paused;
}

/* 4. Grupo de Itens */
.areas-group {
    display: flex;
    gap: 20px; /* Espaço entre as badges */
    padding: 10px 10px; /* Um respiro vertical para a sombra não cortar */
}

/* 5. A Badge (O Item) */
.area-badge {
    background: rgba(255,255,255,0.05); /* Fundo escuro suave */
    border: 1px solid var(--border-color);
    border-radius: 50px; /* Pílula completa */
    padding: 8px 24px 8px 8px; /* Espaço maior na direita para o texto */
    display: flex;
    align-items: center;
    gap: 12px;
    transition: transform 0.2s, box-shadow 0.2s;
    white-space: nowrap; /* Texto não quebra */
    cursor: default;
}

.area-badge:hover {
    transform: translateY(-3px);
    background: var(--bg-card-hover);
    box-shadow: 0 8px 20px rgba(0,0,0,0.2);
    border-color: rgba(255,255,255,0.1);
}

/* Texto da Badge */
.area-badge span {
    font-weight: 600;
    color: var(--text-dark);
    font-size: 0.95rem;
}

/* 6. Ícones Coloridos (Bolinhas) */
.area-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}

/* Cores dos Ícones */
.c-blue   { background: rgba(25,136,254,0.15); color: #60a5fa; }
.c-red    { background: rgba(239,68,68,0.15); color: #f87171; }
.c-gold   { background: rgba(245,158,11,0.15); color: #fbbf24; }
.c-purple { background: rgba(147,51,234,0.15); color: #a78bfa; }
.c-green  { background: rgba(16,185,129,0.15); color: #34d399; }
.c-cyan   { background: rgba(8,145,178,0.15); color: #22d3ee; }
.c-indigo { background: rgba(79,70,229,0.15); color: #818cf8; }

/* 7. Animação Horizontal */
@keyframes scrollHorizontal {
    0% { transform: translateX(0); }
    /* Move para a esquerda 50% (o tamanho exato de um grupo) */
    100% { transform: translateX(-50%); } 
}

/* Ajuste Mobile */
@media (max-width: 768px) {
    .bento-card.areas-section {
        padding: 24px 0;
    }
    .area-badge {
        padding: 6px 16px 6px 6px;
    }
    .area-icon {
        width: 32px; height: 32px; font-size: 1rem;
    }
}
/* =========================================
   MODAL ÁREAS DE ESTUDO
   ========================================= */

/* 1. O Fundo Escuro (Overlay) */
.modal-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(15, 23, 42, 0.6); /* Escuro azulado */
    backdrop-filter: blur(8px); /* Desfoque moderno */
    z-index: 9999;
    
    /* Centralização */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    
    /* Estado inicial: Escondido */
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

/* Quando ativo */
.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* 2. O Card do Modal */
.modal-card {
    background: var(--bg-card);
    width: 100%;
    max-width: 480px;
    border-radius: 24px;
    padding: 40px;
    position: relative;
    box-shadow: 0 20px 50px rgba(0,0,0,0.2);
    
    /* Animação de subida */
    transform: translateY(20px) scale(0.95);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.modal-overlay.active .modal-card {
    transform: translateY(0) scale(1);
}

/* 3. Botão Fechar */
.modal-close {
    position: absolute;
    top: 20px; right: 20px;
    background: rgba(255,255,255,0.08);
    border: none;
    width: 32px; height: 32px;
    border-radius: 50%;
    color: var(--text-light);
    cursor: pointer;
    font-size: 1.2rem;
    display: flex; align-items: center; justify-content: center;
    transition: 0.2s;
}
.modal-close:hover { background: rgba(255,255,255,0.12); color: var(--text-dark); }

/* 4. Conteúdo Interno */
.modal-header {
    text-align: center;
    margin-bottom: 24px;
}

.modal-icon-box {
    width: 64px; height: 64px;
    border-radius: 50%;
    margin: 0 auto 16px;
    display: flex; align-items: center; justify-content: center;
    font-size: 2rem;
    /* A cor virá do JS classes */
}

.modal-header h3 {
    font-size: 1.8rem;
    color: var(--text-dark);
}

.modal-body p {
    text-align: center;
    color: var(--text-body);
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 30px;
}

/* Lista de Vantagens */
.modal-features {
    background: rgba(255,255,255,0.05);
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.m-feat {
    display: flex; align-items: center; gap: 10px;
    font-size: 0.95rem;
    color: var(--text-dark);
    font-weight: 500;
}
.m-feat i { color: var(--primary); font-size: 1.2rem; }

/* Botão CTA */
.modal-cta {
    width: 100%;
    justify-content: center;
    text-align: center;
}

/* Cores dinâmicas para o ícone (Mesmas do card horizontal) */
.icon-box-blue   { background: rgba(25,136,254,0.15); color: #60a5fa; }
.icon-box-red    { background: rgba(239,68,68,0.15); color: #f87171; }
.icon-box-gold   { background: rgba(245,158,11,0.15); color: #fbbf24; }
.icon-box-purple { background: rgba(147,51,234,0.15); color: #a78bfa; }
.icon-box-green  { background: rgba(16,185,129,0.15); color: #34d399; }
.icon-box-cyan   { background: rgba(8,145,178,0.15); color: #22d3ee; }
.icon-box-indigo { background: rgba(79,70,229,0.15); color: #818cf8; }


/* =========================================
   SUBTÍTULO DO CARD ÁREAS
   ========================================= */

.areas-bottom-caption {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px; /* Espaço entre ícone e texto */
    
    margin-top: 24px; /* Distância das badges rolantes */
    padding: 0 20px;
    
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-light); /* Cinza elegante */
    letter-spacing: -0.2px;
    
    opacity: 0.9;
    transition: all 0.3s ease;
    cursor: default;
}

/* Estilo do Ícone */
.areas-bottom-caption i {
    color: var(--primary); /* Azul da marca */
    font-size: 1.1rem;
}

/* Efeito Hover (Ao passar o mouse no card inteiro) */
.bento-card.areas-section:hover .areas-bottom-caption {
    color: var(--primary); /* Texto brilha em azul */
    opacity: 1;
    transform: translateY(-2px); /* Levita levemente */
}
/* =========================================
   CARD SYNC: REDESIGN FINAL (DATA CLOUD)
   ========================================= */

/* 1. Ajuste do Container do Card */
.wide-card.dark-theme {
    background: var(--bg-card);
    color: white;
    display: flex;
    align-items: center;
}

.dark-content-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    padding: 0 10px;
}

.dark-text {
    flex: 1; 
    z-index: 20;
    padding-right: 20px; 
}

/* 2. Área da Animação */
.fluid-sync-visual {
    position: relative;
    width: 300px;
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sync-device {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    z-index: 2;
}

.device-frame {
    border-radius: 10px;
    border: 2px solid rgba(255,255,255,0.15);
    background: rgba(255,255,255,0.05);
    overflow: hidden;
    transition: all 0.4s ease;
}

.sync-device.laptop .device-frame {
    width: 90px;
    height: 60px;
    border-radius: 8px;
}

.sync-device.phone .device-frame {
    width: 42px;
    height: 70px;
    border-radius: 10px;
}

.device-screen {
    width: 100%;
    height: 100%;
    padding: 8px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
}

.screen-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.screen-bar {
    height: 3px;
    background: rgba(25, 136, 254, 0.5);
    border-radius: 2px;
    animation: screenBarPulse 3s ease-in-out infinite;
}

.screen-bar.short {
    width: 60%;
    animation-delay: 0.3s;
}

.screen-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--primary);
    opacity: 0.6;
    margin-top: 2px;
    animation: screenDotPulse 2s ease-in-out infinite;
}

.device-label {
    font-size: 0.65rem;
    font-weight: 600;
    color: rgba(255,255,255,0.5);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.sync-center {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -55%);
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sync-icon-center {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), #43b2ff);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    box-shadow: 0 0 20px rgba(25, 136, 254, 0.4);
    animation: syncSpin 4s ease-in-out infinite;
}

.sync-icon-center i {
    font-size: 1.1rem;
    color: white;
}

.sync-orbit {
    position: absolute;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 1px dashed rgba(25, 136, 254, 0.25);
    animation: orbitSpin 8s linear infinite;
}

.orbit-dot {
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 0 6px rgba(25, 136, 254, 0.6);
}

.orbit-dot.d1 { top: -2px; left: 50%; transform: translateX(-50%); }
.orbit-dot.d2 { bottom: 8px; left: 2px; }
.orbit-dot.d3 { bottom: 8px; right: 2px; }

.sync-pulse {
    position: absolute;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(25, 136, 254, 0.3);
    animation: syncPulseRing 3s ease-out infinite;
}

.sync-pulse.p2 {
    animation-delay: 1.5s;
}

@keyframes syncSpin {
    0%, 100% { transform: rotate(0deg) scale(1); }
    50% { transform: rotate(180deg) scale(1.08); }
}

@keyframes orbitSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes syncPulseRing {
    0% { transform: scale(1); opacity: 0.6; }
    100% { transform: scale(2.5); opacity: 0; }
}

@keyframes screenBarPulse {
    0%, 100% { opacity: 0.4; width: 100%; }
    50% { opacity: 0.8; width: 80%; }
}

.sync-device.phone .screen-bar { animation-delay: 1.5s; }

@keyframes screenDotPulse {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.8; }
}

.sync-device.laptop .device-frame {
    animation: deviceHighlight 6s ease-in-out infinite;
}

.sync-device.phone .device-frame {
    animation: deviceHighlight 6s ease-in-out infinite 3s;
}

@keyframes deviceHighlight {
    0%, 40%, 100% { border-color: rgba(255,255,255,0.15); box-shadow: none; }
    20% { border-color: rgba(25, 136, 254, 0.5); box-shadow: 0 0 15px rgba(25, 136, 254, 0.15); }
}

@media (max-width: 768px) {
    .dark-content-row { flex-direction: column; text-align: center; padding: 30px 20px; }
    .fluid-sync-visual {
        width: 280px;
        height: 120px;
        margin: 20px auto 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .sync-device.laptop .device-frame { width: 70px; height: 46px; }
    .sync-device.phone .device-frame { width: 34px; height: 56px; }
    .sync-center { width: 44px; height: 44px; }
    .sync-icon-center { width: 28px; height: 28px; }
    .sync-icon-center i { font-size: 0.8rem; }
    .sync-orbit { width: 40px; height: 40px; }
    .sync-pulse { width: 28px; height: 28px; }
    .device-label { font-size: 0.6rem; }
}
/* =========================================
   AJUSTE: ESPAÇAMENTO TEXTO (CARD MOBILE)
   ========================================= */

.dark-text h3 {
    margin-bottom: 12px !important; /* Empurra a descrição para baixo */
}

.dark-text p {
    line-height: 1.5; /* Melhora a leitura da descrição */
    opacity: 0.9;
}
/* =========================================
   AJUSTE: BARRA DE DESEMPENHO COM RÓTULO
   ========================================= */

.topic-progress-row {
    width: 100%;
    display: flex;
    align-items: center; /* Alinha texto e barra no centro vertical */
    gap: 10px;           /* Espaço entre a palavra "Desempenho" e a barra */
    margin-top: 4px;     /* Um pequeno respiro dos metadados */
}

/* O novo texto "Desempenho" */
.p-label {
    font-size: 0.7rem;      /* Texto pequeno e elegante */
    font-weight: 600;       /* Negrito suave */
    color: var(--text-light); /* Cinza discreto */
    text-transform: uppercase; /* Caixa alta (opcional, fica moderno) */
    letter-spacing: 0.5px;  /* Leve espaçamento entre letras */
    flex-shrink: 0;         /* Garante que o texto não seja esmagado */
}

/* A trilha cinza da barra */
.p-bar-track {
    flex: 1;         /* O PULO DO GATO: Ocupa todo o espaço que sobrar */
    width: auto;     /* Reseta qualquer largura fixa antiga */
    height: 6px;
    background: rgba(255,255,255,0.08);
    border-radius: 3px;
    overflow: hidden;
}

/* =========================================
   NOVO CARD: SIMPLICIDADE (ZEN MODE)
   ========================================= */

/* 1. O Container do Card */
.simplicity-card {
    background: var(--bg-card);
    display: flex;
    flex-direction: row; /* Texto na esquerda, visual na direita */
    align-items: center;
    justify-content: space-between;
    overflow: hidden;
    padding: 0; /* Remove padding padrão para controlar layout interno */
}

.simplicity-content {
    padding: 30px;
    max-width: 45%;
    z-index: 2;
}

/* 2. Área Visual (Direita) */
.simplicity-visual {
    flex: 1;
    height: 100%;
    min-height: 240px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Máscara suave nas bordas para fundir com o card */
    mask-image: linear-gradient(to right, transparent, black 15%); 
    -webkit-mask-image: linear-gradient(to right, transparent, black 15%);
}

/* 3. Elementos de "Caos" (Fundo) */
.chaos-shape {
    position: absolute;
    background: rgba(148,163,184,0.15);
    border-radius: 12px;
    opacity: 0.3;
    filter: blur(8px); /* Desfoque para representar confusão */
    z-index: 0;
    animation: floatChaos 10s infinite ease-in-out alternate;
}

.s1 { width: 80px; height: 80px; top: 15%; right: 20%; transform: rotate(15deg); }
.s2 { width: 100px; height: 60px; bottom: 15%; right: 30%; transform: rotate(-10deg); animation-delay: 1s; }
.s3 { width: 50px; height: 50px; top: 45%; right: 8%; background: rgba(148,163,184,0.2); animation-delay: 2s; }

@keyframes floatChaos {
    0% { transform: translate(0, 0) rotate(0deg); }
    100% { transform: translate(-20px, 20px) rotate(10deg); }
}

/* 4. O Card "Zen" (Principal) */
.zen-interface-card {
    width: 220px;
    height: 150px;
    background: #1a2540;
    border-radius: 16px;
    box-shadow:
        0 20px 40px -5px rgba(25, 136, 254, 0.2),
        0 0 0 1px rgba(255,255,255,0.06); /* Borda sutil */
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    padding: 16px;
    
    /* Animação de Flutuação Serena */
    animation: floatZen 6s ease-in-out infinite;
}

/* Bolinhas estilo Mac (Header) */
.zen-header {
    display: flex;
    gap: 6px;
    margin-bottom: 20px;
}
.zen-dot { width: 8px; height: 8px; border-radius: 50%; }
.zen-dot.red { background: #ef4444; }
.zen-dot.yellow { background: #f59e0b; }
.zen-dot.green { background: #10b981; }

/* Corpo do Card */
.zen-body {
    display: flex;
    align-items: center;
    gap: 15px;
}

.zen-check-circle {
    width: 40px; height: 40px;
    background: var(--primary);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: white;
    font-size: 1.2rem;
    box-shadow: 0 4px 10px rgba(25, 136, 254, 0.3);
}

.zen-lines {
    flex: 1;
    display: flex; flex-direction: column; gap: 8px;
}
.z-line { height: 6px; background: rgba(255,255,255,0.1); border-radius: 4px; }
.z-line.l1 { width: 80%; }
.z-line.l2 { width: 50%; }

/* Brilho que passa (Shine Effect) */
.zen-shine {
    position: absolute;
    top: 0; left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        to right,
        transparent,
        rgba(255,255,255,0.15),
        transparent
    );
    transform: skewX(-20deg);
    animation: shinePass 4s infinite;
}

@keyframes floatZen {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

@keyframes shinePass {
    0% { left: -100%; opacity: 0; }
    50% { left: 200%; opacity: 1; }
    100% { left: 200%; opacity: 0; }
}

/* Ajuste Mobile */
@media (max-width: 768px) {
    .simplicity-card {
        flex-direction: column;
        text-align: center;
    }
    .simplicity-content { max-width: 100%; padding: 30px 20px 10px; }
    .simplicity-visual { width: 100%; min-height: 200px; padding-bottom: 30px; mask-image: none; }
}

/* =========================================
   CARD: REDE NEURAL IA (V3 - TRUNK)
   Layout: [inputs] --- trunk --- [core] --- trunk --- [outputs]
   ========================================= */
.neural-card {
    grid-column: span 3 !important;
    padding: 28px 24px !important;
}
.neural-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 28px;
}
.neural-header h3 { font-size: 1.2rem; margin-bottom: 2px; }
.neural-header p { font-size: 0.85rem; color: var(--text-light); margin: 0; }

.neural-network {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    position: relative;
}

.neural-col {
    display: flex;
    flex-direction: column;
    gap: 6px;
    z-index: 2;
    flex-shrink: 0;
}

.neural-node {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.04);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-body);
    white-space: nowrap;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.neural-node i { font-size: 1rem; color: var(--primary); flex-shrink: 0; }

.neural-node.node-glow {
    border-color: rgba(25,136,254,0.6) !important;
    background: rgba(25,136,254,0.1) !important;
    box-shadow: 0 0 18px rgba(25,136,254,0.25), inset 0 0 8px rgba(25,136,254,0.06);
}

.neural-node.node-glow-green {
    border-color: rgba(16,185,129,0.6) !important;
    background: rgba(16,185,129,0.1) !important;
    box-shadow: 0 0 18px rgba(16,185,129,0.25), inset 0 0 8px rgba(16,185,129,0.06);
}

.neural-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

.neural-inputs { margin-right: 50px; }
.neural-outputs { margin-left: 50px; }

.neural-core {
    position: relative;
    width: 74px;
    height: 74px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
}
.core-logo {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    z-index: 3;
    position: relative;
}
.core-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid rgba(25,136,254,0.3);
    animation: coreRingSpin 6s linear infinite;
}
.core-ring::before {
    content: '';
    position: absolute;
    top: -3px;
    left: 50%;
    transform: translateX(-50%);
    width: 6px;
    height: 6px;
    background: var(--primary);
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(25,136,254,0.8);
}
@keyframes coreRingSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
.core-glow {
    position: absolute;
    inset: -20px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(25,136,254,0.3) 0%, transparent 70%);
    animation: coreGlowPulse 3s ease-in-out infinite;
}
@keyframes coreGlowPulse {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.2); }
}

@media (max-width: 768px) {
    .neural-card { padding: 20px 16px !important; }

    .neural-network {
        flex-direction: column;
        gap: 0;
    }

    .neural-col {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 6px;
    }

    .neural-node {
        padding: 6px 10px;
        font-size: 0.68rem;
    }
    .neural-node i { font-size: 0.85rem; }

    .neural-inputs { margin-right: 0; margin-bottom: 36px; }
    .neural-outputs { margin-left: 0; margin-top: 36px; }

    .neural-core { width: 60px; height: 60px; margin: 10px 0; }
    .core-logo { width: 30px; height: 30px; }
}

/* =========================================
   CARD: APP SHOWCASE (CARROSSEL DE IMAGENS)
   ========================================= */
.app-showcase-card {
    grid-column: span 3 !important;
    padding: 0 !important;
    overflow: visible !important;
    display: flex !important;
    flex-direction: column !important;
}

.showcase-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 28px 16px;
    gap: 16px;
    flex-wrap: wrap;
}

.showcase-title-row {
    display: flex;
    align-items: center;
    gap: 14px;
}

.showcase-title-row h3 {
    font-size: 1.2rem;
    margin-bottom: 2px;
}

.showcase-title-row p {
    font-size: 0.85rem;
    color: var(--text-light);
    margin: 0;
}

.showcase-dots {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.s-dot {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.04);
    color: var(--text-light);
    font-size: 0.65rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Poppins', sans-serif;
}

.s-dot:hover {
    background: rgba(25,136,254,0.15);
    border-color: rgba(25,136,254,0.3);
    color: var(--primary);
}

.s-dot.active {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
    box-shadow: 0 4px 15px rgba(25,136,254,0.4);
    transform: scale(1.1);
}

.showcase-body {
    display: flex;
    align-items: center;
    gap: 32px;
    padding: 10px 32px 28px;
    flex: 1;
}

.showcase-phone-area {
    position: relative;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 290px;
    height: 560px;
}

.showcase-glow {
    display: none;
}

.showcase-phone-mockup {
    position: relative;
    width: 270px;
    height: 540px;
    background: #0a0f1a;
    border-radius: 34px;
    border: 3px solid rgba(255,255,255,0.12);
    overflow: hidden;
    z-index: 1;
    box-shadow:
        0 0 40px 8px rgba(25,136,254,0.25),
        0 0 80px 20px rgba(25,136,254,0.12),
        0 0 120px 40px rgba(25,136,254,0.06),
        0 30px 60px rgba(0,0,0,0.4);
    animation: phoneMockupGlow 5s ease-in-out infinite;
}

@keyframes phoneMockupGlow {
    0%, 100% { box-shadow: 0 0 40px 8px rgba(25,136,254,0.25), 0 0 80px 20px rgba(25,136,254,0.12), 0 0 120px 40px rgba(25,136,254,0.06), 0 30px 60px rgba(0,0,0,0.4); }
    50% { box-shadow: 0 0 50px 12px rgba(25,136,254,0.35), 0 0 100px 30px rgba(25,136,254,0.18), 0 0 140px 50px rgba(25,136,254,0.08), 0 30px 60px rgba(0,0,0,0.4); }
}

.phone-notch {
    display: none;
}

.showcase-phone-mockup {
    cursor: pointer;
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.4s ease;
}

.showcase-phone-mockup.expanded {
    transform: scale(1.25);
    z-index: 100;
    box-shadow:
        0 0 60px 15px rgba(25,136,254,0.35),
        0 0 120px 40px rgba(25,136,254,0.15),
        0 40px 80px rgba(0,0,0,0.6);
}

.showcase-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transform: scale(1.05);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.showcase-img.active {
    opacity: 1;
    transform: scale(1);
}

.showcase-copy {
    flex: 1;
    position: relative;
    min-height: 160px;
}

.copy-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.4s ease, transform 0.4s ease;
    pointer-events: none;
}

.copy-slide.active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: all;
    position: relative;
}

.copy-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(25,136,254,0.12);
    color: var(--primary);
    font-size: 0.75rem;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 8px;
    margin-bottom: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.copy-tag i {
    font-size: 0.85rem;
}

.copy-slide h4 {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 10px;
    line-height: 1.3;
}

.copy-slide p {
    font-size: 0.92rem;
    color: var(--text-light);
    line-height: 1.6;
    max-width: 420px;
}

@media (max-width: 768px) {
    .app-showcase-card {
        grid-column: auto !important;
    }

    .showcase-header {
        flex-direction: column;
        align-items: flex-start;
        padding: 20px 20px 12px;
    }

    .showcase-dots {
        width: 100%;
        justify-content: center;
    }

    .s-dot {
        width: 24px;
        height: 24px;
        font-size: 0.6rem;
        border-radius: 7px;
    }

    .showcase-body {
        flex-direction: column;
        padding: 10px 20px 24px;
        gap: 24px;
    }

    .showcase-phone-area {
        width: 240px;
        height: 470px;
    }

    .showcase-phone-mockup {
        width: 220px;
        height: 440px;
        border-radius: 30px;
    }

    .showcase-glow {
        width: 260px;
        height: 380px;
    }

    .showcase-copy {
        text-align: center;
        min-height: 140px;
    }

    .copy-slide p {
        max-width: 100%;
    }

    .copy-slide h4 {
        font-size: 1.15rem;
    }

    .copy-tag {
        margin: 0 auto 12px;
    }
}

/* =========================================
   CARD: APROVAÇÃO (COUNTER + TROFÉU)
   ========================================= */

.approved-card {
    /* Gradiente Azul da Marca */
    background: linear-gradient(135deg, #1988fe 0%, #005bc5 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    position: relative;
    min-height: 280px; /* Altura imponente */
}

.approved-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* --- ÍCONE DO TROFÉU --- */
.trophy-container {
    position: relative;
    margin-bottom: 10px;
    perspective: 500px; /* Profundidade 3D */
}

.trophy-icon {
    font-size: 3.5rem;
    color: #ffd700; /* Dourado */
    filter: drop-shadow(0 5px 15px rgba(0,0,0,0.2));
    
    /* Animação: Flutuar + Girar levemente */
    animation: floatTrophy 4s ease-in-out infinite;
    display: block;
}

.trophy-glow {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 60px; height: 60px;
    background: radial-gradient(circle, rgba(255, 215, 0, 0.4) 0%, transparent 70%);
    animation: pulseGlow 2s infinite;
    z-index: -1;
}

/* --- NÚMERO GIGANTE --- */
.counter-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    font-family: 'Poppins', sans-serif;
    margin-bottom: 8px;
}

.plus-sign {
    font-size: 2.5rem;
    font-weight: 600;
    color: #60a5fa; /* Azul mais claro */
    margin-right: 2px;
    margin-top: -10px; /* Ajuste visual */
}

.big-number {
    font-size: 5rem; /* GIGANTE */
    font-weight: 800;
    background: linear-gradient(to bottom, #ffffff 30%, #bfdbfe 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: -2px;
    
    /* Garante que os números não pulem de largura enquanto contam */
    font-variant-numeric: tabular-nums; 
}

.approved-label {
    font-size: 1.1rem;
    font-weight: 500;
    opacity: 0.9;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}
.approved-label strong {
    color: white;
    font-weight: 700;
    opacity: 1; /* O negrito fica 100% branco */
}

/* --- ANIMAÇÕES --- */
@keyframes floatTrophy {
    0%, 100% { transform: translateY(0) rotateY(0deg); }
    50% { transform: translateY(-10px) rotateY(10deg); }
}

@keyframes pulseGlow {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.5; }
    50% { transform: translate(-50%, -50%) scale(1.5); opacity: 0.2; }
}

/* Efeito de Confetes (Partículas de fundo) */
.confetti-bg span {
    position: absolute;
    width: 6px; height: 6px;
    background: rgba(255,255,255,0.1);
    border-radius: 50%;
    animation: floatUpParticles 5s linear infinite;
}
.confetti-bg span:nth-child(1) { left: 10%; bottom: -10%; animation-duration: 4s; }
.confetti-bg span:nth-child(2) { left: 30%; bottom: -20%; animation-duration: 6s; width: 10px; height: 10px; }
.confetti-bg span:nth-child(3) { left: 70%; bottom: -10%; animation-duration: 5s; }
.confetti-bg span:nth-child(4) { left: 90%; bottom: -30%; animation-duration: 7s; width: 8px; height: 8px; }

@keyframes floatUpParticles {
    0% { transform: translateY(0); opacity: 0; }
    50% { opacity: 1; }
    100% { transform: translateY(-300px); opacity: 0; }
}

/* Ajuste Mobile */
@media (max-width: 768px) {
    .big-number { font-size: 3.5rem; }
    .plus-sign { font-size: 2rem; }
    .trophy-icon { font-size: 2.5rem; }
    .approved-card { min-height: 220px; }
}
/* =========================================
   ANIMAÇÃO DE REFLEXO AUTOMÁTICO (LOOP)
   ========================================= */

/* 1. Configuração do Botão */
.btn-shine-effect {
    overflow: hidden !important; /* Essencial: prende o brilho dentro */
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    z-index: 1;
}

/* 2. O Facho de Luz */
.btn-shine-effect::after {
    content: '';
    position: absolute;
    top: 0;
    left: -150%; /* Começa escondido na esquerda */
    width: 100%;
    height: 100%;
    
    /* Degradê: Transparente -> Branco Suave -> Transparente */
    background: linear-gradient(
        90deg, 
        transparent, 
        rgba(255, 255, 255, 0.6), 
        transparent
    );
    
    /* Inclinação */
    transform: skewX(-25deg);
    
    /* Bloqueio de clique */
    pointer-events: none;
    
    /* A MÁGICA: Animação infinita */
    /* 3s = Tempo total do ciclo (Movimento + Pausa) */
    animation: autoShine 3s infinite;
}

/* 3. A Coreografia do Brilho */
@keyframes autoShine {
    /* 0% a 20%: O movimento rápido (aprox. 0.6s) */
    0% {
        left: -150%;
    }
    20% {
        left: 150%; /* Chegou no final */
    }
    
    /* 20% a 100%: O tempo de espera (Pausa) */
    100% {
        left: 150%; /* Fica parado lá fora esperando o loop reiniciar */
    }
}
/* =========================================
   CORREÇÃO: POSIÇÃO DO BOTÃO (ESTRUTURA NOVA)
   ========================================= */

/* 1. Prepara o Card para segurar o botão */
.simplicity-card {
    position: relative !important; /* Torna o card a referência */
    /* Garante que o texto não desça demais e bata no botão */
    padding-bottom: 20px !important; 
}

/* 2. Posicionamento no Desktop (Fixado no canto) */
@media (min-width: 769px) {
    /* Seleciona o botão solto dentro do card */
    .simplicity-card > .btn-shine-effect {
        position: absolute !important;
        
        /* AQUI ESTÁ A MÁGICA DO ESPAÇAMENTO: */
        bottom: 40px !important; /* Desgruda do chão (era 0) */
        left: 40px !important;   /* Alinha com o padding do texto */
        
        margin: 0 !important;
        z-index: 10 !important;
    }
}

/* 3. Posicionamento no Mobile (Fluido e Centralizado) */
@media (max-width: 768px) {
    .simplicity-card > .btn-shine-effect {
        position: relative !important;
        bottom: auto !important;
        left: auto !important;
        
        /* Centraliza e dá espaço */
        margin: 0 auto 40px !important; 
        display: flex !important;
        width: fit-content !important;
    }
}

/* 4. Garantia do Efeito Shine (Caso tenha perdido a referência) */
.btn-shine-effect {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-shine-effect::after {
    content: '';
    position: absolute;
    top: 0; left: -150%;
    width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
    transform: skewX(-25deg);
    transition: none;
}

.btn-shine-effect:hover::after {
    left: 150%;
    transition: left 0.7s ease-in-out;
}
/* =========================================
   CORREÇÃO: POSIÇÃO DO BOTÃO (ESTRUTURA NOVA)
   ========================================= */

/* 1. Prepara o Card para segurar o botão */
.simplicity-card {
    position: relative !important; /* Torna o card a referência */
    /* Garante que o texto não desça demais e bata no botão */
    padding-bottom: 20px !important; 
}

/* 2. Posicionamento no Desktop (Fixado no canto) */
@media (min-width: 769px) {
    /* Seleciona o botão solto dentro do card */
    .simplicity-card > .btn-shine-effect {
        position: absolute !important;
        
        /* AQUI ESTÁ A MÁGICA DO ESPAÇAMENTO: */
        bottom: 40px !important; /* Desgruda do chão (era 0) */
        left: 40px !important;   /* Alinha com o padding do texto */
        
        margin: 0 !important;
        z-index: 10 !important;
    }
}

/* 3. Posicionamento no Mobile (Fluido e Centralizado) */
@media (max-width: 768px) {
    .simplicity-card > .btn-shine-effect {
        position: relative !important;
        bottom: auto !important;
        left: auto !important;
        
        /* Centraliza e dá espaço */
        margin: 0 auto 40px !important; 
        display: flex !important;
        width: fit-content !important;
    }
}

/* 4. Garantia do Efeito Shine (Caso tenha perdido a referência) */
.btn-shine-effect {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-shine-effect::after {
    content: '';
    position: absolute;
    top: 0; left: -150%;
    width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
    transform: skewX(-25deg);
    transition: none;
}

.btn-shine-effect:hover::after {
    left: 150%;
    transition: left 0.7s ease-in-out;
}
/* =========================================
   NOVO GRÁFICO: BARRAS VERTICAIS (SLIDE 4)
   ========================================= */

/* 1. Layout do Gráfico */
.vertical-chart-wrapper {
    display: flex;
    align-items: stretch;
    gap: 12px;
    width: 220px; /* Largura contida para o slide */
    height: 140px;
    position: relative;
    padding-top: 10px; /* Espaço para não cortar o topo */
}

/* 2. Eixo Y (Números) */
.y-axis-col {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: var(--text-light);
    font-size: 0.7rem;
    font-weight: 600;
    padding-bottom: 2px; /* Alinha o 0 com a base */
}

/* 3. Área das Barras */
.bars-area {
    flex: 1;
    position: relative;
    display: flex;
    align-items: flex-end; /* Barras nascem do chão */
    justify-content: space-between; /* Espalha as 7 barras */
    gap: 4px;
}

/* Linhas de Grade (Background) */
.grid-line {
    position: absolute;
    left: 0; width: 100%; height: 1px;
    background: rgba(255,255,255,0.06);
    z-index: 0;
}
.grid-line.top { top: 0; border-top: 1px dashed rgba(255,255,255,0.1); background: none; }
.grid-line.mid { top: 50%; opacity: 0.5; }
.grid-line.bot { bottom: 0; background: rgba(148,163,184,0.3); }

/* 4. As Barras (Design) */
.v-bar {
    width: 100%; /* Largura flexível */
    height: var(--h); /* Altura dinâmica via HTML */
    background: linear-gradient(180deg, #60a5fa 0%, var(--primary) 100%);
    border-radius: 4px 4px 0 0; /* Arredonda só o topo */
    z-index: 1;
    opacity: 0.9;
    box-shadow: 0 4px 10px rgba(25, 136, 254, 0.2);
    
    /* PREPARAÇÃO DA ANIMAÇÃO */
    transform: scaleY(0); /* Começa achatado (invisível) */
    transform-origin: bottom; /* Cresce de baixo pra cima */
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* 5. A Animação (Dispara quando o slide fica .active) */
.slide.active .v-bar {
    transform: scaleY(1); /* Cresce para a altura real */
}

/* Efeito Cascata (Cada barra sobe num tempo diferente) */
.v-bar:nth-child(4) { transition-delay: 0.1s; } /* Barra 1 (Child 4 pq tem 3 linhas antes) */
.v-bar:nth-child(5) { transition-delay: 0.15s; }
.v-bar:nth-child(6) { transition-delay: 0.2s; }
.v-bar:nth-child(7) { transition-delay: 0.25s; }
.v-bar:nth-child(8) { transition-delay: 0.3s; }
.v-bar:nth-child(9) { transition-delay: 0.35s; }
.v-bar:nth-child(10) { transition-delay: 0.4s; }

/* Desktop Fix (Evitar que suba demais igual o donut) */
@media (min-width: 1024px) {
    #metas-slider .slide:nth-child(4) {
        align-items: center !important;
        justify-content: center !important;
    }
    #metas-slider .slide:nth-child(4).active {
        transform: scale(1.1) !important; /* Zoom suave apenas */
    }
}
/* =========================================
   POSIÇÃO: DESCER GRÁFICO DE BARRAS (SLIDE 4)
   ========================================= */

/* Seleciona o BOX do 4º slide */
#metas-slider .slide:nth-child(4) .chart-box {
    /* 1. Muda o alinhamento para baixo */
    justify-content: flex-end !important;
    
    /* 2. Adiciona um calço grande no topo para empurrar pra baixo */
    padding-top: 60px !important; 
    
    /* 3. Garante que não tenha padding embaixo atrapalhando */
    padding-bottom: 0 !important;
}
/* =========================================
   ANIMAÇÃO DE REFLEXO NO CARD FINAL (CTA)
   ========================================= */

/* 1. Prepara o card */
.cta-card-glass {
    position: relative;
    overflow: hidden !important; /* Segura o brilho dentro do card */
    /* Removemos qualquer animação fixa anterior se houver */
}

/* 2. O Facho de Luz (Invisível por padrão) */
.cta-card-glass::after {
    content: '';
    position: absolute;
    top: 0;
    left: -150%; /* Começa escondido na esquerda */
    width: 100%;
    height: 100%;
    
    /* Degradê Branco Grande e Suave */
    background: linear-gradient(
        90deg, 
        transparent 0%, 
        rgba(255, 255, 255, 0.1) 40%, 
        rgba(255, 255, 255, 0.4) 50%, /* Pico de brilho no meio */
        rgba(255, 255, 255, 0.1) 60%, 
        transparent 100%
    );
    
    transform: skewX(-25deg); /* Inclinação elegante */
    pointer-events: none;     /* Permite clicar nos botões através do brilho */
    z-index: 10;              /* Fica por cima de tudo */
}

/* 3. A Classe que Dispara a Animação (Adicionada via JS) */
.cta-card-glass.shine-now::after {
    animation: bigCardShine 1.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Os Keyframes do movimento */
@keyframes bigCardShine {
    0% { left: -150%; }
    100% { left: 150%; }
}
/* =========================================
   VÍDEO DEMONSTRAÇÃO (PHONE MOCKUP)
   ========================================= */

.hero-video-wrapper {
    margin-top: 60px; /* Distância do botão "Garantir acesso" */
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 10;
    padding-bottom: 20px;
}

/* 1. A Etiqueta "VEJA COMO FUNCIONA" */
.video-label-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--primary);
    
    background: rgba(19, 28, 49, 0.8);
    backdrop-filter: blur(4px);
    padding: 8px 20px;
    border-radius: 50px;
    border: 1px solid rgba(25, 136, 254, 0.3);
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    
    margin-bottom: 24px; /* Espaço até o celular */
    animation: bounceSoft 2s infinite;
}

.video-label-pill i {
    font-size: 1.1rem;
}

/* 2. A Moldura de Celular (O Mockup) */
.phone-mockup-frame {
    width: 300px; /* Largura padrão de celular */
    height: 533px; /* Proporção 9:16 (Altura baseada na largura) */
    background: black; /* Fundo enquanto carrega */
    
    border-radius: 36px; /* Bordas bem redondas estilo iPhone */
    
    /* A Mágica da Moldura Branca */
    box-shadow: 
        0 0 0 10px #131c31, /* A borda física */
        0 20px 50px -10px rgba(0, 0, 0, 0.3); /* Sombra profunda para flutuar */
        
    overflow: hidden; /* Corta o vídeo nas curvas */
    position: relative;
    transform: translateZ(0); /* Melhora performance */
}

/* O Iframe (Vídeo) */
.phone-mockup-frame iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block; /* Remove espaços brancos fantasmas */
}

/* Animação suave na etiqueta */
@keyframes bounceSoft {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

/* Ajuste Mobile (Reduz um pouco se a tela for muito pequena) */
@media (max-width: 400px) {
    .phone-mockup-frame {
        width: 260px;
        height: 462px;
    }
}
/* =========================================
   DESTAQUE "PASSAR" (RABISCO HAND-DRAWN)
   ========================================= */

.highlight-scribble {
    font-weight: 800;      /* Negrito forte */
    color: white;          /* Texto branco */
    position: relative;    /* Para posicionar o rabisco */
    display: inline-block;
    z-index: 1;
}

/* O Elemento do Rabisco */
.highlight-scribble::after {
    content: '';
    position: absolute;
    left: -5px;   /* Começa um pouco antes da palavra */
    right: -5px;  /* Termina um pouco depois */
    bottom: -12px; /* Posiciona embaixo do texto */
    height: 15px; /* Altura do rabisco */
    
    /* O Desenho do Rabisco (SVG via CSS) - Cor Amarelo Ouro (#fbbf24) */
    background-image: url("data:image/svg+xml,%3Csvg width='200' height='30' viewBox='0 0 200 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 12C40 5 150 5 198 12' stroke='%23fbbf24' stroke-width='6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    
    background-size: 100% 100%;
    background-repeat: no-repeat;
    z-index: -1; /* Fica atrás do texto (se encostar) */
    
    /* Animação: O rabisco se desenha da esquerda para direita */
    transform-origin: left center;
    transform: scaleX(0); /* Começa invisível */
    animation: drawUnderline 1s cubic-bezier(0.25, 1, 0.5, 1) forwards;
    animation-delay: 0.5s; /* Espera um pouquinho para aparecer */
}

/* Keyframes do desenho */
@keyframes drawUnderline {
    to { transform: scaleX(1); }
}

/* Ajuste Mobile: O rabisco fica um pouco menor */
@media (max-width: 768px) {
    .highlight-scribble::after {
        bottom: -8px;
        height: 10px;
    }
}

/* =========================================
   VARIÁVEIS & RESET (Se o site novo já tiver, ajuste)
   ========================================= */
:root {
    --primary: #1988fe;
    --primary-hover: #3ba0ff;
    --text-dark: #f1f5f9;
    --text-body: #cbd5e1;
    --text-light: #94a3b8;
    --bg-main: #0b1120;
    --bg-card: #131c31;
    --white: #131c31;
}

body {
    font-family: 'Inter', sans-serif;
    color: var(--text-body);
}

h2, h3 {
    font-family: 'Poppins', sans-serif;
    color: var(--text-dark);
}

.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 24px;
    width: 100%;
}

a { text-decoration: none; transition: 0.3s; }

/* =========================================
   SEÇÃO DE PREÇOS (PRICING)
   ========================================= */

.pricing-section {
    padding: 30px 0 40px;
    position: relative;
    background: var(--bg-main);
}

.pricing-header {
    text-align: center;
    max-width: 600px;
    margin: 0 auto 60px;
}

.pricing-header h2 {
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 16px;
    letter-spacing: -1px;
}

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

/* Texto Gradiente no Título */
.text-blue-gradient {
    background-image: linear-gradient(180deg, #43b2ff 0%, #1988fe 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    display: inline-block;
}

/* GRID DE CARDS */
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    align-items: flex-start;
}

/* CARD INDIVIDUAL */
.pricing-card {
    background: var(--bg-card);
    border-radius: 24px;
    padding: 32px;
    position: relative;
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    display: flex;
    flex-direction: column;
    height: 100%;
}

.pricing-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px -10px rgba(25, 136, 254, 0.15);
    border-color: rgba(25, 136, 254, 0.3);
}

/* Destaque Card Anual */
.pricing-card.featured {
    border: 2px solid rgba(25, 136, 254, 0.15);
    box-shadow: 0 10px 30px rgba(25, 136, 254, 0.08);
}
.pricing-card.featured:hover {
    border-color: var(--primary);
}

/* Badge "Mais Popular" */
.popular-tag {
    position: absolute;
    top: -16px;
    right: 24px;
    background: linear-gradient(135deg, #43b2ff 0%, #1988fe 100%);
    color: white;
    font-size: 0.85rem;
    font-weight: 700;
    padding: 6px 16px;
    border-radius: 50px;
    box-shadow: 0 4px 12px rgba(25, 136, 254, 0.3);
    display: flex;
    align-items: center;
    gap: 6px;
    z-index: 2;
}

/* CABEÇALHO DO CARD */
.card-p-header {
    margin-bottom: 32px;
}

.discount-badge {
    background: rgba(25,136,254,0.12);
    color: var(--primary);
    font-size: 0.75rem;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 20px;
    display: inline-block;
    margin-bottom: 12px;
}

.card-p-header h3 {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 16px;
}

/* Bloco de Preço */
.price-block {
    display: flex;
    align-items: baseline;
    gap: 4px;
    margin-bottom: 4px;
    color: var(--text-dark);
}

.prefix { font-size: 1rem; color: var(--text-body); font-weight: 500; }
.value { font-size: 3rem; font-weight: 800; letter-spacing: -1px; line-height: 1; }
.suffix { font-size: 0.9rem; color: var(--text-light); }

.old-price {
    font-size: 0.9rem;
    color: #94a3b8;
    text-decoration: line-through;
    margin-left: 2px;
}

/* BOTÕES */
.btn-pricing {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 14px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 32px;
    transition: 0.2s;
    cursor: pointer;
}

.btn-pricing.solid {
    background: var(--primary);
    color: white;
    box-shadow: 0 8px 20px -5px rgba(25, 136, 254, 0.4);
}
.btn-pricing.solid:hover {
    background: var(--primary-hover);
    transform: translateY(-2px);
}

.btn-pricing.outline {
    background: transparent;
    border: 1px solid var(--primary);
    color: var(--primary);
}
.btn-pricing.outline:hover {
    background: rgba(25,136,254,0.1);
    transform: translateY(-2px);
}

/* LISTA DE RECURSOS */
.features-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.f-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.9rem;
    color: var(--text-body);
    line-height: 1.4;
}

.f-item i {
    color: var(--primary);
    font-size: 1.1rem;
    flex-shrink: 0;
    margin-top: 2px;
}

/* LISTA EXPANSÍVEL */
.features-toggle-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--primary);
    font-weight: 700;
    font-size: 0.9rem;
    margin-top: 12px;
    padding: 8px 0;
    cursor: pointer;
    transition: opacity 0.2s;
    user-select: none;
}
.features-toggle-btn:hover { opacity: 0.8; }
.features-toggle-btn i { transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1); font-size: 1rem; }
.features-toggle-btn.active i { transform: rotate(180deg); }

.features-hidden-content {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.6s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.6s ease;
}
.features-hidden-content.open {
    max-height: 600px;
    opacity: 1;
    margin-top: 10px;
}

/* Custo Diário e PIX */
.daily-cost-simple {
    text-align: center;
    font-size: 0.9rem;
    color: var(--text-light);
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
    width: 100%;
}
.daily-cost-simple strong { color: var(--primary); font-weight: 700; }

.price-footer { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
/* O Badge em si (Fundo verde claro) */
.pix-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    
    background: rgba(50, 188, 173, 0.15); /* Fundo verde Pix */
    color: #32bcad;                      /* Verde Oficial do Pix */
    
    font-size: 0.75rem; /* Texto pequeno */
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 6px;
    line-height: 1; /* Garante altura controlada */
    white-space: nowrap;
}

/* O Ícone SVG do Pix (Correção do tamanho gigante) */
.pix-badge svg {
    width: 14px !important;      /* Força o tamanho pequeno */
    height: 14px !important;     /* Força o tamanho pequeno */
    min-width: 14px !important;  /* Impede de sumir */
    
    fill: currentColor;
    flex-shrink: 0;              /* Impede o ícone de ser esmagado */
    display: block;              /* Remove comportamentos estranhos de linha */
}
/* CARD DE INFO (INFERIOR) */
.pricing-info-card {
    width: 100%; max-width: 700px; margin: 40px auto 0;
    position: relative; z-index: 2;
    background: var(--bg-card); border: 1px solid var(--border-color);
    border-radius: 24px; padding: 30px;
    display: flex; align-items: flex-start; gap: 24px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.03);
    transition: transform 0.3s ease, border-color 0.3s ease;
}
.pricing-info-card:hover { transform: translateY(-5px); border-color: #cbd5e1; box-shadow: 0 10px 30px rgba(0,0,0,0.06); }

.info-icon-box {
    width: 50px; height: 50px; background: rgba(25,136,254,0.15); color: var(--primary);
    border-radius: 14px; display: flex; align-items: center; justify-content: center;
    font-size: 1.6rem; flex-shrink: 0;
}
.info-content { flex: 1; }
.info-content h3 { font-size: 1.1rem; font-weight: 700; color: var(--text-dark); margin-bottom: 10px; }
.info-content p { font-size: 0.95rem; color: var(--text-body); margin-bottom: 20px; }

.duration-badges { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
.d-badge {
    font-size: 0.8rem; font-weight: 600; background: rgba(255,255,255,0.05);
    border: 1px solid var(--border-color); padding: 6px 14px; border-radius: 50px;
    color: var(--text-light); white-space: nowrap;
}
.d-badge.featured { background: rgba(25,136,254,0.12); color: var(--primary); border-color: rgba(25,136,254,0.3); font-weight: 700; }

.payment-note {
    font-size: 0.85rem !important; color: #64748b !important;
    font-weight: 500; margin-bottom: 16px !important;
    display: flex; align-items: center; gap: 8px; padding-top: 0 !important;
}
.payment-note i { font-size: 1.1rem; color: var(--primary); }

.trust-row {
    display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
    padding-top: 16px; border-top: 1px dashed rgba(255,255,255,0.1); width: 100%;
}
.trust-item {
    display: flex; align-items: center; gap: 8px;
    font-size: 0.8rem; font-weight: 600; color: var(--text-body);
    opacity: 0.9; transition: opacity 0.2s;
}
.trust-item:hover { opacity: 1; }
.trust-item i { color: #10b981; font-size: 1.1rem; }
.trust-item:last-child i { color: var(--primary); }

/* ANIMAÇÕES */
@keyframes pulse-btn {
    0% { box-shadow: 0 0 0 0 rgba(25, 136, 254, 0.4); }
    70% { box-shadow: 0 0 0 15px rgba(25, 136, 254, 0); }
    100% { box-shadow: 0 0 0 0 rgba(25, 136, 254, 0); }
}
.pulse { animation: pulse-btn 2s infinite; }

.fade-up-element {
    opacity: 0; transform: translateY(40px);
    transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}
.fade-up-element.visible { opacity: 1; transform: translateY(0); }
.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }

/* RESPONSIVIDADE */
@media (max-width: 1024px) {
    .pricing-grid { grid-template-columns: 1fr; gap: 40px; max-width: 400px; margin: 0 auto; }
    .pricing-header h2 { font-size: 2rem; }
    .popular-tag { right: 50%; transform: translateX(50%); top: -16px; }
    .pricing-info-card { flex-direction: column; align-items: center; text-align: center; padding: 24px 20px; }
    .duration-badges, .trust-row { justify-content: center; }
    .payment-note { justify-content: center; }
}
/* =========================================
   CORREÇÃO FINAL UNIFICADA (DESKTOP)
   ========================================= */
@media (min-width: 1024px) {

    /* --- PARTE 1: BENTO GRID (COM TRAVA ANTI-CORTE) --- */

    /* 1. Trava de segurança no Container do Grid */
    .features-grid .container {
        width: 100%;
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 20px;
        overflow: visible;
    }

    /* 2. O Grid com colunas "esmagáveis" (Impede estouro lateral) */
    .grid-layout {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr)); /* O Segredo do anti-corte */
        gap: 25px;
        width: 100%;
        margin: 0 auto;
        
        /* Mapa visual */
        grid-template-areas:
            "areas areas areas"
            "neural neural neural"
            "crono crono planner"
            "simple simple pomo"
            "notif notif notif"
            "sync sync sync"
            "graph graph reviews"
            "approv approv approv";
    }

    /* 3. Encaixe dos Cards */
    .bento-card.areas-section { grid-area: areas; min-height: 160px; }
    .bento-card.neural-card { grid-area: neural; min-height: 360px; overflow: visible !important; }
    
    .bento-card.large-card { grid-area: crono; min-height: 380px; }
    .bento-card.planner-section { grid-area: planner; min-height: 380px; }
    
    /* Trava específica para o carrossel do planner não vazar */
    .planner-wrapper { width: 100% !important; max-width: 100%; overflow: hidden; }
    .planner-scroll-window { height: 260px !important; width: 100%; }

    .bento-card.simplicity-card { grid-area: simple; flex-direction: row !important; min-height: 260px; }
    .bento-card.visual-card:has(.flashcard-ui) { grid-area: pomo; min-height: 280px; }

    .bento-card.visual-card:has(.notification-ui) { grid-area: notif; min-height: 280px; }
    .bento-card.app-showcase-card { grid-area: sync; min-height: 620px; overflow: visible !important; }

    .bento-card.visual-card:has(.slider-ui) { grid-area: graph; min-height: 320px; }
    .bento-card.visual-card:has(.reviews-scroll-ui) { grid-area: reviews; min-height: 320px; }

    .bento-card.approved-card { grid-area: approv; margin-top: 10px; width: 100%; justify-self: stretch; }

    /* 4. Ajustes Globais nos Cards */
    .bento-card { overflow: hidden !important; height: auto !important; }
    .bento-card img, .bento-card svg { max-width: 100%; height: auto; }
    .chart-box { transform: none; width: 100%; max-width: 100%; }
    #metas-slider .slide.active { transform: scale(1.15) !important; }


    /* --- PARTE 2: PREÇOS (CENTRALIZAÇÃO FORÇADA) --- */

    /* 1. O Container Pai (Obrigamos ele a alinhar tudo ao centro) */
    .pricing-section .container {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important; /* <--- O comando Mestre da centralização */
        max-width: 1200px;
        width: 100%;
        margin: 0 auto;
    }

    /* 2. O Cabeçalho (Texto) */
    .pricing-header {
        text-align: center;
        width: 100%;
        max-width: 700px;
        margin-bottom: 50px;
        margin-left: auto;
        margin-right: auto;
    }

    /* 3. A Grade de Planos (Flexbox Horizontal Centralizado) */
    .pricing-grid {
        display: flex !important;
        flex-direction: row !important; /* Força linha */
        justify-content: center !important; /* Força meio */
        align-items: stretch !important;
        gap: 30px;
        width: 100%;
        
        /* Reseta grid antigo */
        grid-template-columns: none !important;
    }

    /* 4. Os Cards Individuais */
    .pricing-card {
        width: 350px !important;    /* Largura fixa para ficarem iguais */
        min-width: 300px;
        max-width: 380px;
        flex: 0 1 auto;
        margin: 0;                  /* Remove margem lateral que empurra */
        
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .pricing-card.featured {
        transform: scale(1.05);
        z-index: 5;
    }

    /* 5. Card de Informações (Rodapé dos preços) */
    .pricing-info-card {
        margin-top: 50px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        max-width: 900px;
        width: 100%;
        
        display: flex;
        align-items: center;
        justify-content: center;
    }
}
/* AJUSTE EXTRA PARA NOTEBOOKS PEQUENOS (1024px - 1280px) */
@media (min-width: 1024px) and (max-width: 1280px) {
    .container {
        padding: 0 20px !important; /* Garante margem lateral */
    }
    
    .pricing-grid, .grid-layout {
        gap: 15px; /* Gap ainda menor em telas apertadas */
    }
    
    .pricing-card {
        padding: 20px; /* Reduz padding interno para caber texto */
    }
}