:root {
            --primary: #00d2ff;
            --dark: #0f172a;
            --white: #f8fafc;
            --gray: #94a3b8;
        }

        * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Plus Jakarta Sans', sans-serif; }

        body {
            min-height: 100vh; /* Mudado de height para min-height para permitir scroll se necessário */
            display: flex;
            flex-direction: column; /* Cabeçalho em cima, planos embaixo */
            align-items: center;
            justify-content: center;
            background: var(--dark) radial-gradient(circle, rgba(0,210,255,0.1) 0%, transparent 70%);
            color: var(--white);
            padding: 40px 20px;
        }

        header { 
            display: flex; 
            align-items: center; 
            justify-content: center; 
            gap: 15px; 
            margin-bottom: 50px; 
        }
        
        header h1 { font-size: 32px; font-weight: 800; }
        header h1 span { color: var(--primary); }
        
        .line { width: 1px; height: 25px; background: rgba(255,255,255,0.1); }

        /* CONTAINER DOS PLANOS EM ROW */
        .plans-container {
            display: flex;
            flex-direction: row; /* Alinha em linha */
            flex-wrap: wrap;     /* Quebra linha em telas pequenas (mobile) */
            justify-content: center;
            gap: 30px;           /* Espaçamento entre os cards */
            width: 100%;
            max-width: 1200px;   /* Largura máxima maior para caber vários cards */
        }

        article {
            background: rgba(255,255,255,0.03);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(255,255,255,0.1);
            padding: 40px;
            border-radius: 32px;
            text-align: left;
            flex: 1;            /* Faz os cards terem tamanhos iguais */
            min-width: 320px;   /* Não deixa o card ficar muito espremido */
            max-width: 400px;   /* Não deixa o card ficar largo demais */
            transition: 0.3s ease;
        }

        article:hover {
            border-color: var(--primary);
            transform: translateY(-5px);
        }

        .badge {
            background: rgba(255,255,255,0.08);
            padding: 8px 16px;
            border-radius: 10px;
            font-size: 13px;
            display: inline-block;
            margin: 15px 0 25px;
        }

        .price { 
            font-size: 38px; /* Ajustado levemente para caber melhor em row */
            font-weight: 800; 
            margin-bottom: 30px; 
        }
        .price span { font-size: 16px; color: var(--gray); font-weight: 400; }

        .old-price { 
            display: block; /* Preço antigo em cima ou embaixo do novo */
            text-decoration: line-through; 
            font-size: 18px; 
            opacity: 0.5; 
            color: var(--gray);
            margin-bottom: -5px;
        }

        ul { list-style: none; margin-bottom: 30px; min-height: 100px; }
        li { margin-bottom: 12px; color: var(--gray); font-size: 15px; display: flex; gap: 10px; }
        li.on { color: var(--white); }

        button, .btn {
            width: 100%;
            padding: 18px;
            border-radius: 15px;
            border: none;
            background: linear-gradient(135deg, var(--primary), #3a7bd5);
            color: white;
            font-weight: 700;
            text-transform: uppercase;
            cursor: pointer;
            transition: 0.3s;
            text-decoration: none;
        }

        button:hover, .btn:hover { opacity: 0.9; transform: scale(1.02); }

        @media (max-width: 768px) {
            .plans-container { flex-direction: column; align-items: center; }
            article { width: 100%; }
        }