/* ===================================================
       VARIÁVEIS DE CORES E ESTILOS (Identidade MWX)
       =================================================== */
        :root {
          --mwx-primary: #0f172a;
          /* Cor de texto principal / títulos */
          --mwx-subtitle: #475569;
          /* Cor dos textos de apoio */
          --mwx-bg-section: #f8fafc;
          /* Fundo suave da seção */
          --mwx-bg-card: #ffffff;
          /* Fundo branco dos cards */
          --mwx-border-card: #e2e8f0;
          /* Borda sutil dos cards */

          /* Cores dos Ícones (Inspiradas na imagem de referência) */
          --mwx-phase1-color: #2563eb;
          /* Azul */
          --mwx-phase2-color: #f97316;
          /* Laranja */
          --mwx-phase3-color: #8b5cf6;
          /* Roxo */
          --mwx-phase4-color: #10b981;
          /* Verde */
        }

        /* ===================================================
       ESTILOS GERAIS DA SEÇÃO
       =================================================== */
        .mwx-phases-section {
          background-color: var(--mwx-bg-section);
          font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
        }

        .phases-title {
          color: var(--mwx-primary);
          font-size: 2.25rem;
          letter-spacing: -0.5px;
        }

        .phases-subtitle {
          color: var(--mwx-subtitle);
          font-size: 1.1rem;
          max-width: 720px;
          margin: 0 auto;
          line-height: 1.6;
        }

        /* ===================================================
       CARDS DAS FASES
       =================================================== */
        .phase-card {
          background-color: var(--mwx-bg-card);
          border: 1px solid var(--mwx-border-card);
          border-radius: 16px;
          padding: 32px 24px;
          height: 100%;
          transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .phase-card:hover {
          transform: translateY(-6px);
          box-shadow: 0 12px 25px rgba(15, 23, 42, 0.08) !important;
        }

        /* Tag de identificação da fase */
        .phase-label {
          font-size: 0.75rem;
          font-weight: 700;
          letter-spacing: 1px;
          color: #94a3b8;
          margin-bottom: 20px;
        }

        /* Ícones com cantos arredondados e gradiente leve */
        .phase-icon {
          width: 54px;
          height: 54px;
          border-radius: 14px;
          display: flex;
          align-items: center;
          justify-content: center;
          color: #ffffff;
          margin-bottom: 24px;
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }

        /* Cores personalizadas de fundo para cada ícone */
        .phase-icon.phase-1 {
          background: linear-gradient(135deg, #3b82f6, var(--mwx-phase1-color));
        }

        .phase-icon.phase-2 {
          background: linear-gradient(135deg, #fb923c, var(--mwx-phase2-color));
        }

        .phase-icon.phase-3 {
          background: linear-gradient(135deg, #a78bfa, var(--mwx-phase3-color));
        }

        .phase-icon.phase-4 {
          background: linear-gradient(135deg, #34d399, var(--mwx-phase4-color));
        }

        /* Título e descrição do card */
        .phase-card-title {
          color: var(--mwx-primary);
          font-size: 1.25rem;
          line-height: 1.35;
          margin-bottom: 14px;
        }

        .phase-card-text {
          color: var(--mwx-subtitle);
          font-size: 0.95rem;
          line-height: 1.6;
          margin-bottom: 0;
        }

        /* RESPONSIVIDADE */
        @media (max-width: 768px) {
          .phases-title {
            font-size: 1.75rem;
          }

          .phase-card {
            padding: 24px 20px;
          }
        }

        :root {
          --bg-brancoweb: #ffffff;
          --bg-cinzaweb: #f8fafc;
        }

        /* Seção de cima (Cinza Suave) */
        .secao-cinza {
          background-color: var(--bg-cinzaweb);
          padding: 60px 0;
        }

        /* Seção de baixo (Branca) */
        .secao-branca {
          background-color: var(--bg-brancoweb);
          padding: 80px 0;
          position: relative;
        }

        /* Estilo dos cards flutuantes (Lead Score e CSAT) */
        .card-flutuante {
          background-color: #ffffff;
          border-radius: 12px;
          padding: 16px;
          box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
          /* Sombra suave dá efeito de elevação */
          border: 1px solid #f1f5f9;
        }